HTML and CSS Reference
In-Depth Information
Figure 14-26.
The caption has moved and the top headings have borders
7.
The first cell in all the data rows is a
<th>
element. So, use the
:first-child
pseudo-class to give the first column a width of
7%
, left-align the text, and add some
padding like this:
th:first-child {
width: 7%;
text-align: left;
padding-left: 10px;
}
8.
Each column has a
<th>
cell in the first row, so you can set the width of
the other columns with a simple type selector. This has lower specificity than
th:first-child
, so the style won't affect the first column. Also give the header
cells some padding on the top and bottom. Add the following rule to the style sheet:
th {
width: 15.5%;
padding: 5px 0;
}
9.
The decimal fractions in the data cells need to be lined up vertically. CSS currently
doesn't have a way to line up the decimal point. but each number has a single digit
after the decimal point, so you can right-align the cells and add a large amount of
right padding to make the data look centered, as shown in Figure
14-27
. Add the
following style:
td {
text-align: right;
padding: 5px 35px 5px 0;
}
