The base styling for tables is very minimal, focused mainly on correcting the weirdness of default HTML styling.

First	Last	Role
John	Smith	Consultant
Mary	Todd	President
Jane	Doe	Marketer
Albert	West	Graphic Design

<table class="table">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>Consultant</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Todd</td>
      <td>President</td>
    </tr>
    ...
  </tbody>
</table>

.table {
  @import table();
}

Blank tables

While the tables default to something structured and readable, this may not work with your theme either. For that reason, there is an option for blank tables.

The standalone table-blank() mixin available if the element already has table() applied to it elsewhere.

First	Last
Jane	Doe
John	Smith

<table class="table table-blank">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

.table.table-blank {
  @import table($blank: true);
}

Readability tweaks

Zebra-striping

The standalone table-zebra() is also available for elements that already have table() applied.

First	Last
Jane	Doe
Bob	Smith
Craig	Thompson
Doug	Winston

<table class="table table-zebra">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Craig</td>
      <td>Thompson</td>
    </tr>
    <tr>
      <td>Doug</td>
      <td>Winston</td>
    </tr>
  </tbody>
</table>

.table.zebra {
  @import table($zebra: true);
}

Row hover

The standalone table-hover() is also available for elements that already have table() applied.

First	Last
Jane	Doe
Bob	Smith
Craig	Thompson
Doug	Winston

<table class="table table-hover">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Craig</td>
      <td>Thompson</td>
    </tr>
    <tr>
      <td>Doug</td>
      <td>Winston</td>
    </tr>
  </tbody>
</table>

.table.table-hover {
  @import table($hover: true);
}

Bordered

The standalone table-bordered() is also available for elements that already have table() applied.

First	Last
Jane	Doe
Bob	Smith
Craig	Thompson
Doug	Winston

<table class="table table-bordered">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Craig</td>
      <td>Thompson</td>
    </tr>
    <tr>
      <td>Doug</td>
      <td>Winston</td>
    </tr>
  </tbody>
</table>

.table.table-bordered {
  @import table($bordered: true);
}

Combining

Styles are designed to be decoupled, so they can be combined with others.

First	Last
Jane	Doe
Bob	Smith
Craig	Thompson
Doug	Winston

<table class="table table-zebra table-hover table-blank">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Craig</td>
      <td>Thompson</td>
    </tr>
    <tr>
      <td>Doug</td>
      <td>Winston</td>
    </tr>
  </tbody>
</table>

.table.table-hover.table-zebra.table-blank {
  @import table($hover: true, $blank: true, $zebra: true);
}