/*
* /~gshute/common/table.css
*
* Simple styling for tables.
*
* The classes "padded", "spaced", and "bordered" can be applied separately or
* in combination to a table tag.
* The padded styling puts a small amount of padding to the left and right of
* cell content.
* The spaced styling puts a small amount of padding to the top and bottom of
* cell content.
* The bordered styling puts a thin gray border around the cells.
*
* Alignment of text in table cells can be specified using one of the classes
* "left", "center", "right", or "numeric". The "numeric" alignment is designed
* for tables whose first column names or describes the rows and whose remaining
* columns are numeric values. The first column is left justified and the other
* columns are right justified.
*
* The font family for table text can be specified using one of the classes
* "serif", "sans-serif", or "monospaced".
* Table text can be made bold by including the class "bold".
* Table text can be made italic by including the class "italic".
*
* The inline styling allows two tables to appear side-by-side.
*
* These classes can be used in any combination.
* For example, the table start tag
*
*
*
* will generate a table with 0.5em left, right, top, and bottom cell padding,
* thin gray cell borders, a bold italic monospaced cell font, and left-aligned
* cell content.
* Since the table has class "inline" it can be displayed in line horizontally
* with other tables that have class "inline".
*
* Setting the styles for individual table columns is best done using CSS
* first-child() and nth-child() pseudo-classes. See
* https://www.w3.org/Style/Examples/007/evenodd.en.html.
*/
/*
* Styling for tables with cells that are padded on the left and right.
*/
table.padded > tr > td, table.padded > tr > th,
table.padded > tbody > tr > td, table.padded > tbody > tr > th {
padding-left: 0.5em;
padding-right: 0.5em;
}
/*
* Styling for tables with cells that are padded on the top and bottom.
*/
table.spaced > tr > td, table.spaced > tr > th,
table.spaced > tbody > tr > td, table.spaced > tbody > tr > th {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
/*
* Styling for tables whose cells have thin gray borders.
*/
table.bordered {
border-collapse: collapse;
}
table.bordered > tr > th, table.bordered > tr > td,
table.bordered > tbody > tr > th, table.bordered > tbody > tr > td {
border: thin solid var(--gray, lightgray);
}
/*
* Styling for tables whose cells have left-aligned text.
*/
table.left > tr > td, table.left > tr > th,
table.left > tbody > tr > td, table.left > tbody > tr > th {
text-align: left;
}
/*
* Styling for tables whose cells have center-aligned text.
*/
table.center > tr > td, table.center > tr > th,
table.center > tbody > tr > td, table.center > tbody > tr > th {
text-align: center;
}
/*
* Styling for tables whose cells have right-aligned text.
*/
table.right > tr > td, table.right > tr > th,
table.right > tbody > tr > td, table.right > tbody > tr > th {
text-align: right;
}
/*
* Styling for tables whose cells have numeric-aligned text.
* This left-aligns the first column and right-aligns the remaining columns.
*/
table.numeric > tr > td, table.numeric > tr > th,
table.numeric > tbody > tr > td, table.numeric > tbody > tr > th {
text-align: right;
}
table.numeric > tr > td:nth-child(1), table.numeric > tr > th:nth-child(1),
table.numeric > tbody > tr > td:nth-child(1),
table.numeric > tbody > tr > th:nth-child(1) {
text-align: left;
}
/*
* Styling for tables with serif text.
*/
table.serif {
font-family: serif;
}
/*
* Styling for tables with sans-serif text.
*/
table.sans-serif {
font-family: sans-serif;
}
/*
* Styling for tables with monospaced text.
*/
table.monospaced {
font-family: monospace;
}
/*
* Styling for tables with bold text.
*/
table.bold {
font-weight: bold;
}
/*
* Styling for tables with italic text.
*/
table.italic {
font-style: italic;
}
/*
* Styling for inline tables.
* Multiple inline tables can be placed side-by-side if each one has the inline
* class.
*/
table.inline {
display: inline-table;
}