Definition
- Zebra table is when there are alternating white-and-grey stripes on a table.
...
"The syntax of the new value is simple. You include the alignment character (usually a full stop or comma) in quotes, followed by a space and your desired alignment keyword, which defaults to right if you omit it. For example, the following will centre the data and align to a decimal point as in our prior example:"
td { text-align: "." center; }"To specify tabular lining numerals, set the font-variant-numeric property with a value of lining-nums and tabular-nums:"
table { font-variant-numeric: lining-nums tabular-nums;
}
"The equivalent properties for legacy browsers requiring font-feature-settings, use the lnum and tnum OpenType feature tags."
...
Oblique headings to save space
"You can use a simple CSS translation to achieve the effect. You will also need to absolutely position the headings so the original width of the columns isn’t retained and they shrink to wrap the data instead."
th {
transform-origin: bottom left;
position: absolute;
}
th.degC {
transform: translate(2.58em,-2em) rotate(-60deg);
}
th.degF {
transform: translate(5.14em,-2em) rotate(-60deg);
}
Scroll the table offscreen
.fig-table {max-width: 100%;overflow-x: scroll;}
"It is important not to set a width on your table; the browser can then compress the table as far as it can before overflowing off the screen. To preserve readability, make good use of non-breaking spaces and white-space:nowrap to limit the amount the data wraps in the cells. It’s better to have a readable table that requires scrolling than an unreadable one which doesn’t."
...