Alternate table row color using CSS

Question

I am using a table with alternate row color with this    x000D   x000D  tr d0 td   x000D    background-color   CC9999  x000D    color  black  x000D    x000D  tr d1 td   x000D    background-color   9999CC  x000D    color  black  x000D    x000D   lt table gt  x000D     lt tr class  d0  gt  x000D       lt td gt One lt  td gt  x000D       lt td gt one lt  td gt  x000D     lt  tr gt  x000D     lt tr class  d1  gt  x000D       lt td gt Two lt  td gt  x000D       lt td gt two lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    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    lt table class  alternate color  gt       lt tr gt  lt td gt One lt  td gt  lt td gt one lt  td gt  lt  tr gt       lt tr gt  lt td gt Two lt  td gt  lt td gt two lt  td gt  lt  tr gt       lt  table gt    How can I make the rows have  zebra stripes  using CSS

User · Accepted Answer

x000D   x000D    document  ready function   x000D    x000D       tr odd   css   x000D       background-color    000   x000D       color    fff     x000D      x000D  tbody td  x000D    padding  30px  x000D    x000D   x000D  tbody tr nth-child odd   x000D    background-color   4C8BF5  x000D    color   fff  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt table border  1  gt  x000D   lt tbody gt  x000D   lt tr gt  x000D   lt td gt 1 lt  td gt  x000D   lt td gt 2 lt  td gt  x000D   lt td gt 3 lt  td gt  x000D   lt td gt 4 lt  td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt 5 lt  td gt  x000D   lt td gt 6 lt  td gt  x000D   lt td gt 7 lt  td gt  x000D   lt td gt 8 lt  td gt  x000D   lt  tr gt  x000D   lt tr gt  x000D   lt td gt 9 lt  td gt  x000D   lt td gt 10 lt  td gt  x000D   lt td gt 11 lt  td gt  x000D   lt td gt 13 lt  td gt  x000D   lt  tr gt  x000D   lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

Most of the above codes won t work with IE version  The solution that works for IE  other browsers is this        lt style type  text css  gt        tr nth-child 2n                 background-color   FFEBCD             lt  style gt

User · Answer

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           x000D   x000D  table tr nth-child odd  td  x000D             background  ccc  x000D    x000D  table tr nth-child even  td  x000D              background  fff  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt One lt  td gt  x000D       lt td gt one lt  td gt  x000D      lt  tr gt  x000D     lt tr gt  x000D       lt td gt Two lt  td gt  x000D       lt td gt two lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Just add the following to your html code  withing the  lt head gt   and you are done   HTML    lt style gt        tr nth-of-type odd          background-color  ccc         lt  style gt    Easier and faster than jQuery examples

User · Answer

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

User · Answer

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   lt tr style   getbgc  i    gt       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

User · Answer

lt script type  text javascript  gt    function         table alternate color tr even   addClass  d0          table alternate color tr odd   addClass  d1         lt  script gt

User · Answer

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

[html] Alternate table row color using CSS?

Examples related to html

Examples related to css

Examples related to html-table