Github

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.


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.


Variables
VariableTypeDescriptionSample value
$table-border-styleBorder Border style for <table> elements1px solid #bdbdbd
$table-border-radiusBorder radius Border radius for <table> elements2px
$table-marginMargin Margin for <table> elements0 auto
$table-box-shadowBox shadow Box shadow for <table> elements0 1px 3px rgba(0,0,0, 0.1)
$table-caption-font-sizeFont sizer Font size for <caption> elements1.5em
$table-caption-marginMargin Margin for <caption> elements8px
$table-row-paddingPadding Padding for <tr> elements8px
$table-column-paddingPadding Padding for <td> and <th> elements10px
$table-head-back-colorColor Background color for <th> elements#e0e0e0
$table-head-fore-colorColor Text color for <th> elements$fore-color
$table-body-back-colorColor Background color for <td> elements#fafafa
$table-body-fore-colorColor Text color for <td> elements$fore-color
$table-mobile-breakpointBreakpoint Breakpoint for <table> elements' mobile view767px
$table-mobile-card-spacingMargin bottom Bottom margin for <table> elements' cards in mobile view10px
$table-mobile-card-labelString Attribute used to replace headers for <table> elements in mobile view'data-label'
$table-mobile-label-font-weightFont weight Font weight for the labels of <table> elements' cards in mobile view700
$include-horizontal-tableLogical Enables horizontal <table> elements1true
$table-horizontal-nameString Class name for horizontal <table> elements1'horizontal'
$include-scrollable-tableLogical Enables scrollable <table> elements1true
$table-scrollable-nameString Class name for scrollable <table> elements1'scrollable'
$table-scrollable-heightHeight Table for scrollable <table> elements1400px
$table-not-responsive-nameString Class name for preset <table> elements'preset'
$table-striped-nameString Class name for striped <table> elements'striped'
$table-striped-alt-body-back-colorColor Secondary background color for striped <table> elements#eeeeee

Notes:

  1. The value of $table-horizontal-name will only be used if $include-horizontal-table is set to true.
  2. The valuse of $table-scrollable-name and $table-scrollable-height will only be used if $include-scrollable-table is set to true.

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.