Code :
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
Is there any technique I can use to highlight the items that have changed ( in this case , 2nd row's 1st column) using CSS ? or do I have to resort to other things like JavaScript ?
Use classes like:
<html>
<head>
<style type="text/css">
.highlight{
background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
And if something changes you can add the class to the specific element:
$(element).addClass('highlight');
or with plain JavaScript:
element.class = 'highlight';
If you're asking how to highlight the second column of the second row specifically this will work:
table > tr:nth-child(2) > td:nth-child(2) {
background-color:#FFEEEE;
}
If you're asking how to highlight changed rows ANYWHERE, use a class.
Add this to the of your document or the stylesheet.
<style> .highlight { background-color:#FFEEEE; }
Add this to your TD's
class="highlight"
Related
I am setting a :hover attribute on a table to change the row color on hover. It is working fine on CHROME and EDGE but not on IE 11.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
and
<meta http-equiv='X-UA-Compatible' content='IE=9; IE=10; IE=11;IE=8; IE=7; IE=EDGE'/>
CSS part:
tr.fullrow:hover{
background:yellow;
font-size:16px;
}
HTML part:
<table border = "1" class ="tablewip">
<caption> Assy WIP by Product </caption>
<thead>
<tr class ="headerrow">
<td class="headercells" font-size:100px; nowrap >'.$colHeader.'</td>
</tr>
</thead>
<tbody>
<tr class = "fullrow">
<td class = "wipcells" nowrap >Text </td>
</tr>
</tbody>
</table>
Stack snippet
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=9; IE=10; IE=11;IE=8; IE=7; IE=EDGE' />
<style>
tr.fullrow:hover {
background: yellow;
font-size: 16px;
}
</style>
</head>
<body>
<table border="1" class="tablewip">
<caption> Assy WIP by Product </caption>
<thead>
<tr class="headerrow">
<td class="headercells" font-size:100px; nowrap>'.$colHeader.'</td>
</tr>
</thead>
<tbody>
<tr class="fullrow">
<td class="wipcells" nowrap>Text </td>
</tr>
</tbody>
</table>
</body>
</html>
For the CSS part try the following:
tr.fullrow:hover{
background-color:yellow;
font-size:16px;
}
See this example: https://codepen.io/pjamourik/pen/EGBgEy
I would style td of hovered element instead of tr. For example:
tr.fullrow:hover td{
background:yellow;
font-size:16px;
}
How can I add text to a cell using d3?
I have a function with the code that needs to be added and I'm calling this in the body of the html page. I have the following code as an example but it doesn't seem to be working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href ="styles.css">
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
function t1(){
d3.select("td#target").text("14");
}
</script>
</head>
<body onload="t1()">
<table>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr>
<td>Tom</td>
<td>Smith</td>
<td is="target"> </td>
</tr>
</table>
</body>
</html>
Any ideas on how to make this work.
It is a small mistake..
change <td is="target">into <td id="target">
I found the solution. I figured out I had just a typo
<td is="target"> </td>
Should be
<td id="target"> </td>
i have table with three cols that uses bootstrap class "table table-striped". But i want first columns to be 100px in length second 400px and 3rd 200px. How do i do this with bootstrapped tables?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th style="width:100px !important;">Firstname</th>
<th style="width:400px !important;">Lastname</th>
<th style="width:200px !important;">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
you could give it another class like so "table table-width-100 table-striped"
and give the table-width-100 class the new width like so:
.table-width-100 { width: 100px; !important }
where !important overrides the default bootstrap css, but there might be a cleaner solution.
You can simply set width attribute to table headers for example <th style="width: 500px">
The way I would approach this is as follows:
Add a custom class to the <table>, so <table class="table table-striped custom"> for example. This ensures you don't overwrite BootStrap's native styling.
Use the nth-child selector to programmatically select the 1st, 2nd and 3rd <td>'s in all rows, thus eliminating the need to add a different style to each <td>:
https://jsfiddle.net/gcxfxyx3/
The CSS for this particular case is:
.custom td:nth-child(2) {
width: 100px;
}
.custom td:nth-child(3) {
width: 400px;
}
.custom td:nth-child(4) {
width: 200px;
}
this code works:
<html>
<head>
</head>
<body background ="images.png">
<table>
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
I can see the repeated image. but following doesn't.I see no image.
<html>
<head >
</head>
<body>
<table background ="images.png">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
Because background is not a valid attribute for a table tag. Try using CSS.
How can I write a stylesheet to make a particular div element be repeated at the top of every page of a print out?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
thank you
"i was wondering if there is any way to print a div in all of printing html pages". As I understand you need to google for master pages. If you want header for multiple pages you should use PHP to deliver it.