Table
The table module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.
All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.
Quick overview
Presenting information the right way is very important, especially so when dealing with large amounts of data. The table module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most CSS frameworks nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.
Quick start
To customize the table module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
Table styling
The table module contains definitions for tables and table variants.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $table-border-style | Border | Border style for <table> elements | 1px solid #bdbdbd |
| $table-border-radius | Border radius | Border radius for <table> elements | 2px |
| $table-margin | Margin | Margin for <table> elements | 0 auto |
| $table-box-shadow | Box shadow | Box shadow for <table> elements | 0 1px 3px rgba(0,0,0, 0.1) |
| $table-caption-font-size | Font sizer | Font size for <caption> elements | 1.5em |
| $table-caption-margin | Margin | Margin for <caption> elements | 8px |
| $table-row-padding | Padding | Padding for <tr> elements | 8px |
| $table-column-padding | Padding | Padding for <td> and <th> elements | 10px |
| $table-head-back-color | Color | Background color for <th> elements | #e0e0e0 |
| $table-head-fore-color | Color | Text color for <th> elements | $fore-color |
| $table-body-back-color | Color | Background color for <td> elements | #fafafa |
| $table-body-fore-color | Color | Text color for <td> elements | $fore-color |
| $table-mobile-breakpoint | Breakpoint | Breakpoint for <table> elements' mobile view | 767px |
| $table-mobile-card-spacing | Margin bottom | Bottom margin for <table> elements' cards in mobile view | 10px |
| $table-mobile-card-label | String | Attribute used to replace headers for <table> elements in mobile view | 'data-label' |
| $table-mobile-label-font-weight | Font weight | Font weight for the labels of <table> elements' cards in mobile view | 700 |
| $include-horizontal-table | Logical | Enables horizontal <table> elements1 | true |
| $table-horizontal-name | String | Class name for horizontal <table> elements1 | 'horizontal' |
| $table-horizontal-breakpoint | Breakpoint | Breakpoint for horizontal <table> elements' mobile view1 | 768px |
| $table-not-responsive-name | String | Class name for preset <table> elements | 'preset' |
| $table-striped-name | String | Class name for striped <table> elements | 'striped' |
| $table-striped-alt-body-back-color | Color | Secondary background color for striped <table> elements | #eeeeee |
Notes:
- The values of
$table-horizontal-nameand$table-horizontal-breakpointwill only be used if$include-horizontal-tableis set totrue.
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.