Skip to main content
live This is a new website – your feedback will help us to improve it.

Tables

Uses

You should one use tables for tabular data. For other use cases, such as a listing of items with actions, you should use the grid system instead of a table so that it works correctly on mobiles.

Variations

Basic table

Use the .bsk-table class to apply basic table styles. This class is opt-in to ensure compatibility with tables managed by third party widgets or applications such as Apex.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Striped rows

Add .bsk-table-striped to style alternate rows with the <tbody> of a table.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Bordered table

Add .tbsk-able-bordered to apply additional borders around the table and between cells.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Hoverable rows

Add .bsk-table-hover to highlight the row with focus within a table.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Contextual rows

The standard contextual background classes can be used as the background of table rows using these classes:

Standard Contextual Background Table Cell Contextual Background Class
Success .bsk-success
Warning .bsk-warning
Danger .bsk-danger
Info .bsk-info

These classes only work within tables. Use the standard contextual background classes to use them in other situations.

You can also use the .bsk-active class to highlight a row as if it had focus when using the row hover styles.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica
Bird Island Bird Island, South Georgia
Signy Factory Cove, Borge Bay, Signy Island 
<table class="bsk-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bsk-success">
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr class="bsk-warning">
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr class="bsk-danger">
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
    <tr class="bsk-info">
      <td>Bird Island</td>
      <td>Bird Island, South Georgia</td>
    </tr>
    <tr class="bsk-active">
      <td>Signy</td>
      <td>Factory Cove, Borge Bay, Signy Island</td>
    </tr>
  </tbody>
</table>

Small table

Add .bsk-table-condensed to reduce padding within a table to make it more compact.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<table class="bsk-table bsk-table-condensed">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ny-Ålesund</td>
      <td>Svalbard, High Arctic</td>
    </tr>
    <tr>
      <td>Rothera</td>
      <td>Adelaide Island, Antarctica</td>
    </tr>
    <tr>
      <td>Halley VI</td>
      <td>Brunt Ice Shelf, Antarctica</td>
    </tr>
  </tbody>
</table>

Layouts

Responsive table

Wrap a table with the .bsk-table-responsive class to make them scroll horizontally on smaller devices.

Responsive tables may not be compatible with advanced mark-up such as drop-down menus and other widgets due to clipping caused by the use of overflow-y: hidden.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<div class="bsk-table-responsive">
  <table class="bsk-table bsk-table-condensed">
    <thead>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ny-Ålesund</td>
        <td>Svalbard, High Arctic</td>
      </tr>
      <tr>
        <td>Rothera</td>
        <td>Adelaide Island, Antarctica</td>
      </tr>
      <tr>
        <td>Halley VI</td>
        <td>Brunt Ice Shelf, Antarctica</td>
      </tr>
    </tbody>
  </table>
</div>

Firefox requires some additional styles to fix a bug with <fieldset> elements which interferes with responsive tables. This can be fixed using the code below, but it is not included in the Style Kit by default.

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}