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

FirstLastRole
JohnSmithConsultant
MaryToddPresident
JaneDoeMarketer
AlbertWestGraphic 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.

FirstLast
JaneDoe
JohnSmith

<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.

FirstLast
JaneDoe
BobSmith
CraigThompson
DougWinston

<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.

FirstLast
JaneDoe
BobSmith
CraigThompson
DougWinston

<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.

FirstLast
JaneDoe
BobSmith
CraigThompson
DougWinston

<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.

FirstLast
JaneDoe
BobSmith
CraigThompson
DougWinston

<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);
}