Tables

Classes for table styles are defined to allow style rules to be “layered onto” a table. The clean class is the basic class. Additional classes apply zebra-striping, borders, and responsive behavior. The responsive behavior is enabled using both CSS and JavaScript.

Proper application of styles and the responsive behavior depends on semantically correct structure of the tables. Tables should use the <thead> and <tbody> tabs. Table headers should have the scope attribute to indicate how the headers should be interpreted.

Using the float-left and float-right classes, a table can be positioned to the left or right of the main text. Positioning left or right is limited to larger screen sizes. At smaller screen sizes, the styled tables are displayed at full width.

Classes

.clean

Applied to a <table> tag for basic styles. Padding is applied to cells and the table width is set to 100%. All other TYFY table styles should be used in combination with this style.

.striped

Applied to a <table> tag to add shading to even-numbered rows in within the <tbody>.

.horizontal-rules

Applied to a <table> tag to add horizontal rules between table rows. Table heading cells with the attribute scope="col" will have increased rule thickness to distinguish them from table cells.

.vertical-rules

Applied to a <table> tag to add vertical rules between table columns. Table heading cells with the attribute scope="row" will have increased rule thickness to distinguish them from table cells.

.responsive

Applied to a <table> tag to add responsive behavior. Responsive behavior requires the inclusion of the tables.js javascript file.

.float-left, .float-right

Applied to a <table> tag to float the table left or right. Width of a floated table is approximately 50% of the containing element, including an appropriate margin. Adjacent tables can be floated left and right for a side-by-side layout. At screen widths below the value of $tyfy-break-floats, the float styles are disabled.

Variables

$tybreak-floats

40em !default;

Screen width above which float styles are enabled.

$tybreak-table

40em !default;

Screen width below which responsive tables are converted to labeled lists

$tyfont-table

$tyfont-sans !default;

Table cell font selection

$tywidth-border

2px !default;

Border thickness for table cells

$tycolor-border

mix($tycolor-fg,$tycolor-bg,12%) !default;

Default border color

$tycolor-shade

rgba($tycolor-fg,0.05) !default;

A background color for shading when using the .striped class

Demo