Tables

Useful table styling out of the box.

File location: sass/layout/_tables.scss (GitHub)

Basic Responsive Table with Caption

A data table with auto column widths, which is the browser's default rendering. No hgrid classes needed here.

<table>
  <caption>Crypto Currency Rates by Market Cap</caption>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Symbol</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bitcoin</td>
      <td>BTC</td>
      <td>$59,239.22</td>
    </tr>
    <!-- etc. -->
  </tbody>
</table>

You can add headings (h3, h4 etc.) or markup like strong inside caption if you need to tweak its properties. Utilities like margin-bottom-{x} can also be used.

Fixed Column Widths

Add .layout-fixed to the table element. Now every column will have the same width. You can also choose to style the table cells on the first row in order to control the column widths independently.

Adding .striped to table helps distinguish rows from each other.

<table class="layout-fixed striped">
  <!-- table rows here -->
</table>

Table Scroll

By wrapping the table in a container with a limited width and a class of .scrollable-x, it will be scrollable horizontally – as long as its content overflows the container width. Only a table, table cells, rows or columns with a max-width or a fixed width will contribute to the table growing larger than the scroll container.

The following example table scrolls horizontally, and includes a tfoot element. This can be practical for long lists. The footer gets basic hgrid styling out of the box.

<div class="scrollable-x">
  <table>
    <thead>
      <!-- table head rows here -->
    </thead>
      <!-- table rows here -->
    <tfoot>
      <!-- table footer rows here -->
    </tfoot>
  </table>
</div>

Here we have set a fixed container width to make the table scrollable, and added a dotted border in order to show the container limit:

For vertical scrolling, wrap the table in a container with .scrollable-y and a fixed height. (Border added to the container for clarity).

Combine .scrollable-x and .scrollable-y (in that order) if you want the table to scroll both horizontally and vertically.

← Previous: Grid

Next: Positioning →