HTML and CSS Reference
In-Depth Information
Figure 14-26. The caption has moved and the top headings have borders
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;
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;
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;
Search WWH ::

Custom Search