Simple Components

Table Components

The Codebase .table component class expands tables to 100% width, aligns everything to the left, and adds some padding and a fine-line border around every table cell.

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

<table class="table">
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table content 1.1</td>
      <td>Table content 2.1</td>
      <td>Table content 3.1</td>
    </tr>
    <tr>
      <td>Table content 1.2</td>
      <td>Table content 2.2</td>
      <td>Table content 3.2</td>
    </tr>
  </tbody>
</table>

Table Variations

.table.table-brderless – no borders around table cells

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

.table.table-compact – less padding

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

.table.table-fixed - applies a fixed width to each table cell using table-layout: fixed;, so that column widths are equalized :

Table Header Number One	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1 has a more content than other cells	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4 - you really can have any amount of content, and the columns will still have a fixed equal width.

.table.table-striped – applies a transparent white tint and a transparent black tint to alterating rows:

Table Header 1	Table Header 2	Table Header 3
Table content 1.1	Table content 2.1	Table content 3.1
Table content 1.2	Table content 2.2	Table content 3.2
Table content 1.3	Table content 2.3	Table content 3.3
Table content 1.4	Table content 2.4	Table content 3.4

Oversized tables

Tables can often be so wide that they break your page

For adding horizontal scrolling to a table that is too wide for the available space (especially important on narrow viewports), wrap the table in a <div> with the overflow-x utility class.

<div class="overflow-x">
  <table class="table">
    ...
  </table>
</div>

Table Header 1	Table Header 2	Table Header 3	Table Header 4	Table Header 5	Table Header 6	Table Header 7	Table Header 8	Table Header 9	Table Header 10	Table Header 11	Table Header 12	Table Header 13	Table Header 14	Table Header 15
Table content 1.1	Table content 2.1	Table content 3.1	Table content 4.1	Table content 5.1	Table content 6.1	Table content 7.1	Table content 8.1	Table content 9.1	Table content 10.1	Table content 11.1	Table content 12.1	Table content 13.1	Table content 14.1	Table content 15.1
Table content 1.2	Table content 2.2	Table content 3.2	Table content 4.2	Table content 5.2	Table content 6.2	Table content 7.2	Table content 8.2	Table content 9.2	Table content 10.2	Table content 11.2	Table content 12.2	Table content 13.2	Table content 14.2	Table content 15.2
Table content 1.3	Table content 2.3	Table content 3.3	Table content 4.3	Table content 5.3	Table content 6.3	Table content 7.3	Table content 8.3	Table content 9.3	Table content 10.3	Table content 11.3	Table content 12.3	Table content 13.3	Table content 14.3	Table content 15.3

Are you have a situation where there is (or is going to be) a lot of oversized, layout-breaking tables?Then you can add some JavaScript to your template, that automatically adds this overflow-x wrapper to all tables that have the .table class. Here’s one way of doing that:

<script>
  (function () {

    [].forEach.call(document.querySelectorAll('.table'), function(el) {
      var table = el.outerHTML;
      var tableWrapped = '<div class="overflow-x">' + table + '</div>';
      el.outerHTML = tableWrapped;
    });

  }());
</script>

Documentation

Table Variations

Oversized tables