CHAPTER 16. TABLES 170
Skipping Headings:You may want to avoid numbering the headings and
just number the data rows. Here is an example that treats the first row
differently than the rest.
tr:first-child::before { ... }
tr:not(:first-child)::before { ... }
This allows you to increment and display the counter on just those rows
that are not the first child.
16.9 Overfull Cells
What should happen when a cell has more content than will fit on one line?
Normally that content will be displayed on as many lines as needed, keeping
within the width boundaries that are in effect.
Sometimes we want to just display one line of information and hide the rest.
A common use case might be showing subject lines of emails. We might
want each email to have just one line in the table.
white-space: nowrapcan be used to keep the cell contents all on one line.
White-space: normal is the default.
Exam Question 304(p.354): What CSS “attribute: value;” keeps cell
contents on one line?
Required Answer:white-space: nowrap;
What if the subject is longer than will fit in the cell? We can clip it and
simply not display the remainder that would not fit.
overflow: hiddencan be used to hide any content that would not fit in
the cell. This is also called clipping. Overflow: visible is the default, and
causes the extra content to be displayed beyond the space reserved for the
cell.
Exam Question 305 (p.354): What CSS “attribute: value;” clips cell
content that does not fit inside the cell?
Required Answer:overflow: hidden;
table { white-space: nowrap; overflow: hidden; }