How to create zebra stripes on html table without using javascript and even/odd classes generation?

后端 未结 5 1531
情话喂你
情话喂你 2020-12-08 01:54

I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw c

5条回答
  •  难免孤独
    2020-12-08 02:23

    In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:

    tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
      background-color: green;
    }
    tr:nth-child(odd)  /* same */ {
      background-color: green;
    }
    tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
      background-color: pink;
    }
    tr:nth-child(even) /* same */ {
      background-color: pink;
    }
    

    Good luck with browser compatibility - you'll need it.
    There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.

提交回复
热议问题