Incorporating a background color on alternating table rows creates a pleasing zebra stripes effect.
For styling every alternate table row element, employ the :nth-child(even) selector in this manner:
Example
| tr:nth-child(even) { background-color: #D6EEEE; } |
| Keep in mind: Substituting (odd) for (even) will result in styling on rows 1, 3, 5, etc., rather than 2, 4, 6, etc. |
For vertical zebra stripes, apply styling to every alternate column rather than every alternate row.
Apply the :nth-child(even) selector to table data elements in this manner:
Example
| td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE; } |
| Remember: Apply the :nth-child() selector to both th and td elements to apply the styling to both headers and regular table cells. |
By merging the styling techniques from the two previous examples, you can achieve stripes on every alternate row and column.
Utilizing a transparent color will produce an overlapping effect.
Specify the transparency of the color using the rgba() function.
Example
| tr:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } th:nth-child(even),td:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } |
To create horizontal dividers in your table, apply borders exclusively at the bottom of each table row.
Include the border-bottom property for all tr elements.
Example
| tr { border-bottom: 1px solid #ddd; } |
Apply the :hover selector to tr elements to highlight table rows when hovered over with the mouse.
Example
| tr:hover {background-color: #D6EEEE;} |
