By Marko Dugonjić CHAPTER 9th, td {
border-top: .1em solid #ccc;
padding: .65em 1em .75em; / .75em = 1.5em/2 /
vertical-align: top;
}
.numeric {
text-align: right;
font-feature-settings: 'tnum';
}
Some popular typefaces on the Web, for instance Proxima Nova and
Georgia don’t support fixed width lining numerals. In that case, you might
want to consider other alternatives, for instance Anonymous Pro^80 by Mark
Simonson. It’s free and available at a Web font host service near you, or a
good old Web-safe font such as Courier New, Trebuchet MS or Verdana.
Setting tabular figures with OpenType fonts is the best option for tabu-
lar data. Activate them with the font-feature-settings property.
Another CSS rule that would be useful for tabular data — still in work-
ing draft — is character-based alignment in a table column^81. When the
alignment character is specified, it is centered along a single column-paral-
lel axis and the text is shifted accordingly. This is especially convenient for
styling an array of numbers with a separator, for instance decimal num-
bers. At the time of writing, this rule is still not supported in browsers.
td { text-align: "." center }
When a large unexpected chunk of data fills the table (for instance a long
URL), it can fall out of its designated area and break the layout. To keep the
table from falling apart, we can use the CSS rule table-layout: fixed and
set the maximum width to the table, for instance 100%. This should keep
the table contained within the parent element.
80 http://www.marksimonson.com/fonts/view/anonymous-pro
81 http://www.w3.org/TR/css3-text/#character-alignment