Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be opt-in.

How to use

Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat 
<table class="table table-hover">
  <thead>
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    ...
  </tbody>
</table>

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

First Name Last Name Username
Mark Otto @mdo 
<table class="table table-sm">
  <thead>
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

Column Head Column Head Column Head
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content 
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-success">...</td>
  <td class="table-warning">...</td>
  <td class="table-danger">...</td> 
</tr>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat 
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr> 
  </tbody>
</table>

Table select

Use .table-select.

# 01 02 03 04 05
1
2
3 
<table class="table table-striped table-select text-xs-center">
  <thead>
    <tr>
      <th class="empty">#</th>
      <th class="text-xs-center">01</th>
      <th class="text-xs-center">02</th>
      <th class="text-xs-center active">03</th>
      <th class="text-xs-center">04</th>
      <th class="text-xs-center">05</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <th>1</th>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td class="active"><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
    </tr>
    <tr>
      <th>2</th>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td class="active"><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
    </tr>
    <tr>
      <th>3</th>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td class="active"><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
    </tr>
  </tbody>
</table>

Card table

Add .table-full.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat 
<div class="card">
  <table class="table table-full table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr> 
    </tbody>
  </table>
</div>

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat 
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr> 
  </tbody>
</table>

Table with selectable rows

Add the class .selectable-rows to any <table>, and then configure the data-link table row attribute of <tbody>, like to the <input type="radio"> id selector.

Tamanho CPU RAM Cache
1 core 1 GB
2 core 2 GB
3 core 3 GB
4 core 4 GB 
<table class="table selectable-rows">
  <thead>
    <tr> 
      <th>Tamanho</th>
      <th>CPU</th>
      <th>RAM</th>
      <th>Cache</th> 
    </tr>
  </thead>
  <tbody>
    <tr data-link="id-selector-1"> 
      <td>
        <span class="form-check mb-0">
          <input id="id-selector-1" class="form-check-input" type="radio" name="selectable-rows">
          <label class="form-check-label" for="id-selector-1">1 GB</label>
        </span>				
      </td>
      <td>1 core</td> 
      <td>1 GB</td>
      <td><span class="icon icon-close icon-2x"></span></td> 
    </tr> 
    <tr data-link="id-selector-2" class="selected"> 
      <td>
        <span class="form-check mb-0">
          <input id="id-selector-2" class="form-check-input" type="radio" name="selectable-rows" checked>
          <label class="form-check-label" for="id-selector-2">2 GB</label>
        </span>				
      </td>
      ...
    </tr> 
    <tr data-link="id-selector-3"> 
      ...
    </tr>  
  </tbody>
</table>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

First Name Last Name Username
Mark Otto @mdo
Larry the Bird @twitter 
<table class="table table-bordered">
  <thead>
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr> 
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Responsive tables

Wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>