Tables

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 alternative styles

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

<table class="table table-borderless">
  ...
</table>

<table class="table table-compact">
  ...
</table>

<table class="table table-fixed">
  ...
</table>

<table class="table table-striped">
  ...
</table>

table-borderless – no borders around table or 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-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-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-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

Combining table styles

You can combine table styles. For example:

<table class="table table-borderless table-compact table-striped">
  ...
</table>

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

Content alignments inside cells

• vertical-align-middle / vertical-align-bottom

table cells in Codebase normally have their content aligned top left of each cell (<th> or <td>). You cacn change the vertical alignment with vertical-align-middle or vertical-align-bottom.

For table <th> or <td> center or right alignment, use t-center or t-right.

Oversized tables

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> that has the overflow-x utility class.

Codebase overflow-x uses to remove margins from around Codebase table classes (but not from the classless <table> tag). Therefore you may also need to add some bottom margin to the overflow wrapper – e.g. using mb-2

<div class="overflow-x mb-2">
  <table class="table table-compact table-striped">
    ...
  </table>
</div>

Are you have a situation where there is (or is going to be) multiple 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 mb-2">' + table + '</div>';
      el.outerHTML = tableWrapped;
    });

  }());
</script>