CHAPTER 16. TABLES 169
tr.th { font-weight: bold; text-align: center; }
td:nth-child(1) { width: 20px; text-align: right; }
td:nth-child(2) { width: 50px; text-align: center; }
td:nth-child(3) { width: 120px; text-align: left; }
td:nth-child(4) { width: 20px; text-align: right; }
td:nth-child(5) { width: 40px; text-align: right; }
16.8 Automatic Row Numbering
Sometimes it is desirable to number the rows of a table even though the
HTML does not include numbers. We can add them using CSS.
Content:Thecontent:tag can be used in connection with the::before
and::afterpseudo-elements. This lets you create “content” that is not true
content but is styling by adding words.
Counters: You can invent counters, initialize them, increment them, and
display them. Here is an example.
table { counter-reset: trNum; }
tr::before { content: counter(trNum) ".";
counter-increment: trNum; }
The first line creates a counter named trNum (for table row number) and
resets its value to zero at the start of every table. You can override the initial
value. You can name your counter almost anything but avoid reserved words.
The other lines say that for each tr element in the table, before the actual
HTML content, some new content should be displayed. This new content
consists of the value of the trNum counter, followed by a dot. The trNum
counter is also incremented by one. You can override the size of the incre-
ment.
Our new content mostly acts like a new
Position: Your row numbers will naturally be in the top left corner of
their cell, and you may want them to line up better with the table content.
Relative positioning can adjust where the numbers appear.