The table styling provided allows you to easily style tables to your liking. The table's header has its style and the body is styled to be striped and have left borders in its default state. Colors, padding and many other properties can be changed on the fly.
To customize your table styling, use the mixin provided in the _table.scss partial file.
Definition
make-tbl(
$tbl-name,
$tbl-border,
$tbl-margin,
$tbl-padding,
$tbl-head-bg-color,
$tbl-head-color,
$tbl-body-bg-color,
$tbl-body-alt-bg-color,
$tbl-body-color,
$tbl-horizontal-name,
$tbl-bordered-name)
Parameters
- $tbl-name : The class name of the table.
- $tbl-border : The border of the table and cells. [1]
- $tbl-margin : The margin of the table cells.
- $tbl-padding : The padding of the table cells.
- $tbl-head-bg-color : The color of the thead background.
- $tbl-head-color : The color of the thead text.
- $tbl-body-bg-color : The color of the even-numbered rows in tbody.
- $tbl-body-alt-bg-color : The color of the odd-numbered rows in tbody.
- $tbl-body-color : The color of the text in tbody.
- $tbl-horizontal-name : The class name for the horizontal style table.
- $tbl-bordered-name : The class name for the bordered style table.
Notes:
- [1] : This style will apply to the table and cells. All styles applied to the table (horizontal, bordered) will use the same style of border.
- By setting the
$tbl-body-bg-color and $tbl-body-alt-bg-color to the same color, the table style produced will not be striped.
- Horizontal and bordered style classes can be manually removed or they can be manually changed to overwrite the base style, so that the base style has horizontal or full borders instead of left borders.