Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Examples

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. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

  <table class="table">
    <thead>
      <tr>
        <th class="font-weight-semi-bold border-top-0 py-2">#</th>
        <th class="font-weight-semi-bold border-top-0 py-2">First</th>
        <th class="font-weight-semi-bold border-top-0 py-2">Last</th>
        <th class="font-weight-semi-bold border-top-0 py-2">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="py-3">1</td>
        <td class="py-3">Mark</td>
        <td class="py-3">Otto</td>
        <td class="py-3">@mdo</td>
      </tr>
      <tr>
        <td class="py-3">2</td>
        <td class="py-3">Jacob</td>
        <td class="py-3">Thornton</td>
        <td class="py-3">@fat</td>
      </tr>
      <tr>
        <td class="py-3">3</td>
        <td class="py-3">Larry</td>
        <td class="py-3">the Bird</td>
        <td class="py-3">@twitter</td>
      </tr>
    </tbody>
  </table>

Striped rows

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

  <table class="table table-striped">
    <thead>
      <tr>
        <th class="font-weight-semi-bold border-top-0 py-2">#</th>
        <th class="font-weight-semi-bold border-top-0 py-2">First</th>
        <th class="font-weight-semi-bold border-top-0 py-2">Last</th>
        <th class="font-weight-semi-bold border-top-0 py-2">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="py-3">1</td>
        <td class="py-3">Mark</td>
        <td class="py-3">Otto</td>
        <td class="py-3">@mdo</td>
      </tr>
      <tr>
        <td class="py-3">2</td>
        <td class="py-3">Jacob</td>
        <td class="py-3">Thornton</td>
        <td class="py-3">@fat</td>
      </tr>
      <tr>
        <td class="py-3">3</td>
        <td class="py-3">Larry</td>
        <td class="py-3">the Bird</td>
        <td class="py-3">@twitter</td>
      </tr>
    </tbody>
  </table>

Bordered table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</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>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 

  <div class="table-responsive">
    <table class="table">
      ...
    </table>
  </div>

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 

  <div class="table-responsive-sm">
    <table class="table">
      ...
    </table>
  </div>

  <div class="table-responsive-md">
    <table class="table">
      ...
    </table>
  </div>

  <div class="table-responsive-lg">
    <table class="table">
      ...
    </table>
  </div>

  <div class="table-responsive-xl">
    <table class="table">
      ...
    </table>
  </div>