7 tables Tables

This is the base style for tables. They can be used to organize list views, standard content, or complicated forms. Several modifier classes are available for added flexibility.

For the sake of mobile compatibility, a .table-scroll container class can be applied to a parent element to allow for horizontal scrolling in cases where the table is too wide for its container.

Examples

Default styling

First Name	Last Name	Age	Affiliation	Favorite Color
Harry	Potter	18	Gryffindor	Red
Ginny	Weasley	16	Gryffindor	Green
Draco	Malfoy	18	Slytherin	Black
Luna	Lovegood	18	Ravenclaw	Blue

.condensed

Remove default cell padding for increased data density.

First Name	Last Name	Age	Affiliation	Favorite Color
Harry	Potter	18	Gryffindor	Red
Ginny	Weasley	16	Gryffindor	Green
Draco	Malfoy	18	Slytherin	Black
Luna	Lovegood	18	Ravenclaw	Blue

.expanded

Add additional cell padding.

First Name	Last Name	Age	Affiliation	Favorite Color
Harry	Potter	18	Gryffindor	Red
Ginny	Weasley	16	Gryffindor	Green
Draco	Malfoy	18	Slytherin	Black
Luna	Lovegood	18	Ravenclaw	Blue

.stretch-column

Expand this column to the maximum width.

First Name	Last Name	Age	Affiliation	Favorite Color
Harry	Potter	18	Gryffindor	Red
Ginny	Weasley	16	Gryffindor	Green
Draco	Malfoy	18	Slytherin	Black
Luna	Lovegood	18	Ravenclaw	Blue

.shrink-column

Contract this column to the minimum width.

First Name	Last Name	Age	Affiliation	Favorite Color
Harry	Potter	18	Gryffindor	Red
Ginny	Weasley	16	Gryffindor	Green
Draco	Malfoy	18	Slytherin	Black
Luna	Lovegood	18	Ravenclaw	Blue

.small-header-text

Smaller header text size.

First Name	Last Name	Age	Affiliation	Favorite Color
Harry	Potter	18	Gryffindor	Red
Ginny	Weasley	16	Gryffindor	Green
Draco	Malfoy	18	Slytherin	Black
Luna	Lovegood	18	Ravenclaw	Blue

Markup: ../../../../../styleguide/styleguide-examples/table.njk

<div class="table-scroll">
  <table class="">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>Affiliation</th>
        <th>Favorite Color</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Harry</td>
        <td>Potter</td>
        <td>18</td>
        <td>Gryffindor</td>
        <td>Red</td>
      </tr>
      <tr>
        <td>Ginny</td>
        <td>Weasley</td>
        <td>16</td>
        <td>Gryffindor</td>
        <td>Green</td>
      </tr>
      <tr>
        <td>Draco</td>
        <td>Malfoy</td>
        <td>18</td>
        <td>Slytherin</td>
        <td>Black</td>
      </tr>
      <tr>
        <td>Luna</td>
        <td>Lovegood</td>
        <td>18</td>
        <td>Ravenclaw</td>
        <td>Blue</td>
      </tr>
    </tbody>
  </table>
</div>

Source: ../kitsune/sumo/static/sumo/scss/base/_table.scss, line 5