CHAPTER 16. TABLES 167
16.6 Row Styling
One common form of row styling is to alternate the background color or
border thickness on every other line, or every fifth line, to make it easier for
the user’s eye to follow across the table through a sea of information.
tr:nth-child(2n) { background-color: white; }
tr:nth-child(2n+1) { background-color: yellow; }
Exam Question 302(p.354): What CSS selector targets even numbered
rows?
Required Answer:tr:nth-child(2n)
Exam Question 303(p.354): What CSS selector targets odd numbered
rows?
Required Answer:tr:nth-child(2n+1)
We can also help the user clearly see one whole line by styling it differently
using hover, perhaps with an outline or a background color.
tr:hover { outline: thin red solid; }
tr:hover { background-color: #9999ff; }
Remember that when two stylings conflict, the later one usually wins. There-
fore, the more general styling should be applied first and the exception
should be applied last. In this case, nth-child should be applied first and
hover last.
16.7 Column Styling
When using table-layout: fixed, we can carefully assign column widths by
specifying the width: attribute for each of the
The class Approach:Our first approach assigns a class to each column.
Of course, we can use meaningful names instead of .th1 to help us remember
what we are trying to style. Then we simply add a class attribute to each
heading element.
.th1 { width: 20px; }