Tables

Default Table

Our base table style should not require any atomic classes. Additionally, the width of columns in tables can be set by using Leap's grid classes.

Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3 
<table>
  <tbody>
    <tr>
      <th class="col-20-xs">Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>

Table with Rows

You can add borders on all the rows in a table by adding the class .table-border-rows class. Additionally, you can change the color of the border by adding an additional modifier to the end of the class.

Table Border Colors

  • .table-border-rows
  • .table-border-rows-light
  • .table-border-rows-mid
  • .table-border-rows-dark
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3 
<table class="table-border-rows-light">
  <tbody>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>

Table with Columns

You can add borders on all the columns in a table by adding the class .table-border-columns class. Additionally, you can change the color of the border by adding an additional modifier to the end of the class.

Table Border Colors

  • .table-border-columns
  • .table-border-columns-light
  • .table-border-columns-mid
  • .table-border-columns-dark
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3 
<table class="table-border-column-dark">
  <tbody>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>

Table with Cells

You can add borders on all the cells in a table by adding the class .table-border-cells class.

Table Border Colors

  • .table-border-cells
  • .table-border-cells-light
  • .table-border-cells-mid
  • .table-border-cells-dark
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3 
<table class="table-border-cells">
  <tbody>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
  </tbody>
</table>