HTML and CSS Reference
In-Depth Information
Figure 14-27. The data is neatly aligned in each column
10. give the table rows in the <tbody> section alternate background colors using the
:nth-child() pseudo-class.
tbody tr:nth-child(odd) {
background-color: #FFEDD2;
tbody tr:nth-child(even) {
background-color: #D8CCBA;
11. For older browsers, use one of the colors for the whole <tbody> . Although you're
using the same color, you can't use a group selector because browsers ignore the
entire style rule if they don't recognize one of the selectors. So, add this after the
styles you have just entered:
tbody {
background-color: #FFEDD2;
12. As a final touch, add a rule to change the background color of a row when the
mouse pointer hovers over it:
tbody tr:hover {
background-color: #F4F1EC;
13. Save the style sheet, and test the table in a modern browser. it's now styled like
Figure 14-28 .
Search WWH ::

Custom Search