{"id":2001,"date":"2016-11-20T09:18:16","date_gmt":"2016-11-20T15:18:16","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2001"},"modified":"2016-11-20T09:18:16","modified_gmt":"2016-11-20T15:18:16","slug":"how-to-add-zebra-striping-to-your-tables","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-add-zebra-striping-to-your-tables\/","title":{"rendered":"How to Add Zebra Striping to Your Tables"},"content":{"rendered":"

With CSS, it’s really easy to add a zebra striping effect to your tables (where every other row is shaded grey — or whatever color you like!) with only ONE simple line of code.<\/p>\n

Let’s say you have a standard table:<\/p>\n

\"Screen<\/p>\n

The table has four columns and three rows. Maybe you’re like us an don’t like the look of borders, so you need something else to let the user know that this group of data\u00a0is, in fact, a table. That’s where zebra striping comes in. To apply zebra striping to your table, you literally only need to use one line of CSS:<\/p>\n

\u00a0<\/span><\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. tbody tr&lt;<\/span>span class=<\/span>&quot;<\/span>token pseudo-class&quot;<\/span>&gt;<\/span>:nth-<\/span>child(<\/span>odd)<\/span>&lt;<\/span>\/span&gt;<\/span> &lt;<\/span>\/span&gt;<\/span>&lt;<\/span>span class=<\/span>&quot;<\/span>token punctuation&quot;<\/span>&gt;<\/span>{<\/span>&lt;<\/span>\/span&gt;<\/span><\/div><\/li>\n
  2. &lt;<\/span>span class=<\/span>&quot;<\/span>token property&quot;<\/span>&gt;<\/span>background-color&lt;<\/span>\/span&gt;<\/span>&lt;<\/span>span class=<\/span>&quot;<\/span>token punctuation&quot;<\/span>&gt;:<\/span>&lt;<\/span>\/span&gt;<\/span> &lt;<\/span>span class=<\/span>&quot;<\/span>token hexcode&quot;<\/span>&gt;<\/span>#ccc<\/span>&lt;<\/span>\/span&gt;<\/span>&lt;<\/span>span class=<\/span>&quot;<\/span>token punctuation&quot;<\/span>&gt;;<\/span>&lt;<\/span>\/span&gt;<\/span><\/div><\/li>\n
  3. &lt;<\/span>span class=<\/span>&quot;<\/span>token punctuation&quot;<\/span>&gt;<\/span>}<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    The code above uses the nth-child to select only the odd numbered children of the tbody element, so that every other row or <tr> tag has a grey background to separate it from the even numbered rows. Your finished product should look like this:<\/p>\n

    \"Screen<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    With CSS, it’s really easy to add a zebra striping effect to your tables (where every other row is shaded grey — or whatever color you like!) with only ONE simple line of code.<\/p>\n

    Let’s say you have a standard table:<\/p>\n<\/p>\n

    The […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2782,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2001"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2001"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2782"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}