I am using a table with alternate row color with this.
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}
<table>
<tr class="d0">
<td>One</td>
<td>one</td>
</tr>
<tr class="d1">
<td>Two</td>
<td>two</td>
</tr>
</table>
Here I am using class for tr, but I want to use only for table. When I use class for table than this apply on tr alternative.
Can I write my HTML like this using CSS?
<table class="alternate_color">
<tr><td>One</td><td>one</td></tr>
<tr><td>Two</td><td>two</td></tr>
</table>
How can I make the rows have "zebra stripes" using CSS?
$(document).ready(function()
{
$("tr:odd").css({
"background-color":"#000",
"color":"#fff"});
});
tbody td{
padding: 30px;
}
tbody tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>
There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:
tr:nth-child(even)
background-color: #000000;
}
Note: No support in IE 8.
Or, if you have jQuery:
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
You have the :nth-child() pseudo-class:
table tr:nth-child(odd) td{
...
}
table tr:nth-child(even) td{
...
}
In the early days of :nth-child() its browser support was kind of poor. That's why setting class="odd" became such a common technique. In late 2013 I'm glad to say that IE6 and IE7 are finally dead (or sick enough to stop caring) but IE8 is still around — thankfully, it's the only exception.
Just add the following to your html code (withing the <head>) and you are done.
HTML:
<style>
tr:nth-of-type(odd) {
background-color:#ccc;
}
</style>
Easier and faster than jQuery examples.
can i write my html like this with use
css ?
Yes you can but then you will have to use the :nth-child() pseudo selector (which has limited support though):
table.alternate_color tr:nth-child(odd) td{
/* styles here */
}
table.alternate_color tr:nth-child(even) td{
/* styles here */
}
We can use odd and even CSS rules and jQuery method for alternate row colors
Using CSS
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
Using jQuery
$(document).ready(function()
{
$("table tr:odd").css("background", "#ccc");
$("table tr:even").css("background", "#fff");
});
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
<table>
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
</table>
Most of the above codes won't work with IE version. The solution that works for IE+ other browsers is this.
<style type="text/css">
tr:nth-child(2n) {
background-color: #FFEBCD;
}
</style>
<script type="text/javascript">
$(function(){
$("table.alternate_color tr:even").addClass("d0");
$("table.alternate_color tr:odd").addClass("d1");
});
</script>
You can use nth-child(odd/even) selectors however not all browsers (ie 6-8, ff v3.0) support these rules hence why most solutions fall back to some form of javascript/jquery solution to add the classes to the rows for these non compliant browsers to get the tiger stripe effect.
There is a fairly easy way to do this in PHP, if I understand your query, I assume that you code in PHP and you are using CSS and javascript to enhance the output.
The dynamic output from the database will carry a for loop to iterate through results which are then loaded into the table. Just add a function call to the like this:
echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop.
then add the function to the page or library file:
function getbgc($trcount)
{
$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
if($odd==1){return $blue;}
else{return $green;}
}
Now this will alternate dynamically between colors at each newly generated table row.
It's a lot easier than messing about with CSS that doesn't work on all browsers.
Hope this helps.
Please try this way: it can use in Html file for WebView
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: Lightgreen;
}
</style>
</head>
Alternating rows selector
Here is how it works and how you can for example use the modulo to alternate between rows of several different colors (here 3):
ol>li:nth-child(3n+1) {
background-color: blue;
}
ol>li:nth-child(3n+2) {
background-color: green;
}
/* The following selector is equivalent to "nth-child(3n)" */
ol>li:nth-child(3n+3) {
background-color: red;
}
<ol>
<li />
<li />
<li />
<li />
<li />
<li />
<li />
<li />
<li />
</ol>
As it as already been stated, rows indexes used in the selector starts from 1 (and not 0). That's why the selector of the 1st, 4th, 7th rows is nth-child(3n+1).
How the selector reads
The selector nth-child(Mn+k) for a row of index i reads as if (i % M == k). For example, if we want to select all rows whose base 3 modulo is equal to 2 we would write in CSS nth-child(3n+2), in other (javascript) words, the selector does this:
const M = 3;
const k = 2;
for (let i = 1; i < 10; i+=1){
// The `nth-child(Mn+k)` selector:
if (i % M == k){
console.log(`${i} selected`);
}
}
Outputs
2 selected
5 selected
8 selected
Related
I have a very simple table for testing
<table>
<th>Header</th>
<tr><td>Somecontent</td></tr>
</table>
Now I surely can do
<th onMouseOver="this.style.backgroundColor='#123456'" OnMouseOut="this.style.backgroundColor='#234567'" >Header</th>
but this would only only highlight the header. I cannot add this code to the as it doesnt work. Any Idea how I can highlight the entire table on mouseover?
#Sebastian Heyn Please check following code. I hope you were expecting the same.
table:hover {
background-color: #FFEB3B;
color: red;
}
<table>
<tr>
<th>Header</th>
<th>Header</th>
</tr>
<tr><td>Somecontent</td>
<td>Somecontent</td>
</tr>
</table>
Why are you using a combination of inline JS and CSS? Put this stuff in your stylesheet...
table:hover {
background: red;
}
try my code.hope its may help u.
.sample {
border:1px;
}
.sample th{
background-color:red;
}
.sample th:hover{
background-color:blue;
}
<table class="sample" border=1>
<tr><th>Header</th></tr>
<tr><td>Somecontent</td></tr>
</table>
Im not specialist , but maybe you should make table id and use some jquery function.
On .GMDataRow td:hover I want to change background-color for each td in that tr element. Is this possible only with CSS? I'm trying to do it with CSS only, I don't need JQuery, JS solutions.
<tr class="GMDataRow">
<td></td>
<td</td>
...
</tr>
try this way
tr.GMDataRow:hover td{background:#ccc;}
Solution suggested by Lalji is perfect.
tr.GMDataRow:hover td{
background-color:red;
}
tr.GMDataRow finds the class "GMDataRow" in table rows.
tr.GMDataRow:hover will activate hover css for current targeted row.
tr.GMDataRow:hover td will target all column which are child of active row.
If you want to change td background on hover differently ... try this
HTML
<table style="width:100%">
<tr class="GMDataRow">
<td>ceva</td>
<td>ceva</td>
<td>ceva</td>
<td>ceva</td>
</tr>
</table>
CSS
.GMDataRow td:first-child:hover {
background: yellow;
}
.GMDataRow td:nth-child(2):hover {
background: pink;
}
.GMDataRow td:nth-child(3):hover {
background: red;
}
.GMDataRow td:last-child:hover {
background: blue;
}
also take a look here http://www.w3schools.com/css/css_pseudo_classes.asp , or here http://www.w3schools.com/cssref/sel_firstchild.asp maybe it will help you to understand better.
I would like to add Currency symbol using "css generated content" after each price present in an html table.
Currently I'm indicating table-cell that contain prices in the following way
<table>
<tr>
<td>Test</td>
<td class='prices'>123</td>
</tr>
</table>
In order to reach my target I wrap each .prices content with a span, writing the following css rule:
TD *:after
{
content:' €';
}
It runs correctly but I would like to avoid wrapping with span.
Obviously applying "generated content" directly to TD could be the solution only accepting that currency is written before value, but with my actual solution currency is written after.
Do this:
.prices:after {
content:' €';
}
or to put the Euro symbol before the content:
.prices:before {
content:'€ ';
}
try this Demo
<table>
<tr>
<td>Test</td>
<td class='prices'>123</td>
</tr>
</table>
td{
width:100px;
border:1px solid blue;
}
td.prices:after
{
content:' €';
}
All,
I have an ASP.NET GridView that is rendered to an HTML table.
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
</table>
I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.
I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?
Can anyone give me a starting point for this?
Cheers
Andez
There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:
tr:not(:first-child):hover {
background-color: red;
}
Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:
tr:hover {
background-color: red;
}
tr:first-child:hover {
background-color: white;
}
Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).
I hope that helped, too!
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
Why not simply use
tr>td:hover {
/* hover effect */
background-color: lightblue;
}
This will only affect table rows with td's inside, not table rows with th's inside.
Works in all browsers. Cheers, guys.
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
If your table is standard, you have a table like this:
<table>
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<th>cell</th>
</tr>
</tbody>
</table>
so you can use this css code:
table > *:not(thead) tr:hover{
background-color: #f5f5f5;
}
my problem is, that I have two different html files with a table containing theader, tfooter and tbody.
the first one is my own creation for test reasons and it looks like this:
<html>
<head>
<title>The Invoice</title>
<style type="text/css">
table.invoice { background-color: #dddddd; font-family: sans-serif; }
td, th { background-color: #ffffff; padding: 5pt; }
td.unit { text-align: right; }
td.price { text-align: right; }
thead { display: table-header-group; }
tfoot th { text-align: right; }
</style>
</head>
<body>
<div style="width:auto !important; overflow:hidden; position:relative">
<table class="invoice" cellspacing="1" cellpadding="0">
<thead>
<th>Unit</th>
<th>Description</th>
<th>Price</th>
</thead>
<tfoot>
<tr>
<th colspan="2">Sum</th>
<td class="price">1.230,32 EUR</td>
</tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Excel</td><td >150,00 EUR</td></tr>
<tr><td>2</td><td>Document</td><td>150,00 EUR</td></tr>
... and so on ...
</tbody>
</table>
</div>
</body>
</html>
whenever I try the print preview on IE9 it shows the tfoot on the last page (page 5 in my case) which shows the overall sum of the body content price column.
when I try the same in Mozilla Firefox 11.0 it shows the tfoot with the overall sum on every page which I don't want of course.
the main reason I'm asking is because I have a FreeAgent html dom where I want to print out some Invoice. With that html file even IE9 shows the tfoot on every page, which, again!, I don't want.
I played around with
#media print { tfoot { display: table-footer-group;
position: absolute;
bottom: 0; }}
there it shows the footer just once, but on the first page at the bottom left all accross the rest of my text ...
ideas or solutions much appreciated! :)
Try this CSS in your print stylesheet, it will make the tfoot act as another row yet keeping the proper syntax that something like Datatables.net needs.
table tfoot{display:table-row-group;}
The tfoot is actually supposed to "always be visible at the bottom" (or something along those lines), so it makes sense for Firefox to print the footer at the bottom of the table on every page.
In particular this is useful for if you have table header cells to name columns, or are using the footer as a label or repeated headers.
You should probably have your sum as just another row on the end of the table.