Table Row Striping Example

Using CSS3's rgba() color with opacity and CSS3's nth-child() selector, easier table row zebra striping!

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1
Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2
0 100 1,230 99,832 1,000,323
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer

Table Column Striping Example

Using CSS3's rgba() color with opacity and CSS3's nth-child() selector, easier table column zebra striping!

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1
Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2
0 100 1,230 99,832 1,000,323
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer

Table Row and Column Striping Example

Using CSS3's rgba() color with opacity and CSS3's nth-child() selector, easier table row and table column zebra striping!

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1
Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2
0 100 1,230 99,832 1,000,323
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer

Table Borders with Striping Example

Using CSS3's rgba() color with opacity and CSS3's nth-child() selector, easier table row and table column zebra striping! As a bonus, includes borders that work the way I want them to! Basically,

The border resolution model makes it somewhat inconvenient to do this when border-collapse is set. At least, it is inconvenient to set up generic defaults, but after working with tables endlessly at work I've settled on some decent base styles.

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1
Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2
0 100 1,230 99,832 1,000,323
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer

Easy Colors!

Using CSS3's rgba() color with opacity and CSS3's nth-child() selector, easier table row and table column zebra striping!

Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading
Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1 Table Cell Text Row 1
Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2 Table Cell Text Row 2
0 100 1,230 99,832 1,000,323
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer