Table

table

For basic table styles, only the table component class is required. Use proper HTML table markup and styles should apply as expected.

<table class="table">
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
    ...
  </tbody>
</table>

For simple responsive table styles, wrap your tables in the scroll-box base module which provides horizontal scrolling when tables can’t fit in their container.

<div class="scroll-box">
  <table class="table">
    ...
  </table>
</div>

table_overflow_ellipsis

Switches a table layout to fixed and adds ellipsis overflow styles to table cells and headers.

<table class="table table_ellipsis">
  ...
</table>

Space will be split equally between columns when table_ellipsis is applied. For more control over specific column widths, use the <colgroup> and <col> elements and set their desired widths as needed.

<table class="table table_ellipsis">
  <colgroup>
    <col style="width: 50px;">
  </colgroup>
  ...
</table>

table_hover

Adds hover and focus state styles for table row (<tr>) elements.

<table class="table table_hover">
  ...
</table>

table_responsive_[key]

When the scroll-box base module isn’t mobile friendly enough, this modifier adds responsive styles to a table so that it’s easier to read on specific breakpoints. This is done by using the data-mobile-label attribute on table cells that should correspond to the table column header for that specific cell. Use the value-less table_responsive modifier to apply these styles universally.

<table class="table table_responsive_lg">
  <thead>
    <tr>
      <th>key</th>
      <th>value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-mobile-label="key">...</td>
      <td data-mobile-label="value">...</td>
    </tr>
  </tbody>
</table>

The mobile label value will be truncated if it exceeds the width set by $mobile-label-width, so keep the label terse when possible.

Available Variations

• table_responsive
• table_responsive_xs
• table_responsive_sm
• table_responsive_md
• table_responsive_lg
• table_responsive_xl

@mixin table-responsive-styles()

Output responsive table styles. This is used to generate the styles for the table_responsive_[key] modifier.

Example

.table_custom_modifier {
  @include table-responsive-styles();
}

table_size_[key]

Adjust the size of a table by increasing or decreasing cell padding.

<table class="table table_size_sm">
  ...
</table>

<table class="table table_size_lg">
  ...
</table>

Available Variations

• table_size_sm
• table_size_lg

table_style_[value]

Adds table styles based on the provided value.

<table class="table table_style_rowed">
  ...
</table>

<table class="table table_style_bordered">
  ...
</table>

Available Variations

• table_style_rowed
• table_style_bordered

table_zebra

Adds zebra styled rows to a table to help increase its readability. This is done by alternating the background color of rows to help guide the reader’s eye.

<table class="table table_zebra">
  ...
</table>

Sass Variables

$breakpoints

The breakpoints map the table_responsive_[key] modifier uses to build its styles.

// Inherited from: core.$breakpoints
$breakpoints: (
  "xs": 480px,
  "sm": 620px,
  "md": 760px,
  "lg": 990px,
  "xl": 1380px
) !default;