Friday, 15 August 2014

HTML table row alternate row color

tr:nth-child(even) {
    background-color: #000000;
}
Note: No support in IE, even IE 8.

Or, if you have jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});
==========================




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, even IE 8.

Or, if you have jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});
=========================

table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}

-------------------------------


CSS:

tr.d0 td {
    background-color: #CC9999; color: black;
}
tr.d1 td {
    background-color: #9999CC; color: black;
}
HTML:

<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>




No comments:

Post a Comment