Configuring Tables

HTML tables can be fiddly to skin. In combination with the table mixin, these config variables make this job a breeze.

The default table variable allows you to very quickly when used with the table. It doesn't need much explaining, as the keys speak for themselves:

$default-table: (
    fontfamily: $global-font-stack,
    layout: fixed,
    background: #fff,
    borderwidth: 1px 1px 1px 1px,
    bordercolor: #fff #fff #fff #fff,
    borderstyle: solid solid solid solid,
    margin: 24px 0px 24px 0px,
    bordercollapse: collapse,
    width: 100%,

    caption: (
        background: #fff,
        padding: 24px 0,
        fontfamily: inherit,
        fontweight: $bold,
        fontcolor: $global-font-color,
        fontsize: 22px,
        textalign: center,
        borderwidth: 0px 0px 1px 0px,
        bordercolor: $bright $bright $bright $bright,
        borderstyle: solid solid solid solid
    ),
    header: (
        background: $bright,
        padding: 16px 0,
        fontfamily: inherit,
        fontweight: $global-font-weight,
        fontcolor: $global-font-color,
        fontsize: 18px,
        textalign: center,
        verticalalign: middle,
        borderwidth: 1px 1px 1px 1px,
        bordercolor: #fff #fff #fff #fff,
        borderstyle: solid solid solid solid
    ),
    body: (
        background: $bright,
        oddbackground: $bright,
        evenbackground: #fff,
        padding: 8px 0,
        fontfamily: inherit,
        fontweight: $global-font-weight,
        fontcolor: $global-font-color,
        fontsize: 18px,
        textalign: center,
        verticalalign: middle,
        borderwidth: 1px 1px 1px 1px,
        bordercolor: #fff #fff #fff #fff,
        borderstyle: solid solid solid solid
    ),
    footer: (
        background: $bright,
        padding: 8px 0,
        fontfamily: inherit,
        fontweight: $global-font-weight,
        fontcolor: $global-font-color,
        fontsize: 18px,
        textalign: center,
        borderwidth: 1px 1px 1px 1px,
        bordercolor: #fff #fff #fff #fff,
        borderstyle: solid solid solid solid
    ),
);

If you want to add a second table style, simply copy this variable and rename it:

$custom-table: (
    fontfamily: $global-font-stack,
    ...
);

Then use the mixin to apply it to a table

table.customtable {
   @mixin table($custom-table);
}

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.