Tables

Optional styling for tables.

Due to the widespread use of tables across third-party widgets like calendars and date pickers, table styles are designed to be opt-in. Simply add the .table class to any <table> element, and extend it with custom styles or modifier classes.

All table styles are inherited, meaning any nested tables will be styled in the same manner as the parent.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Invert the colors by adding .table-dark.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Table head options

Use modifier classes .thead-light or .thead-dark to make the table head appear light or dark.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>


<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the body of the table.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Bordered table

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

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Borderless table

Add .table-borderless for a table without borders.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Hoverable rows

Add .table-hover to enable a hover state on table rows within the table body.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Small table

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

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Colors

Use color classes from the color palette to color table rows or cells with .table-{color}.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-danger">
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td class="table-success">Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td class="table-info">Strange animal</td>
    </tr>
  </tbody>
</table>

Regular table background variants (.table-{color}) are not available with the dark table. Instead, you may use text or background utilities (.bg-{color}) to achieve similar styles.

#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-danger">
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td class="bg-success">Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td class="bg-info">Strange animal</td>
    </tr>
  </tbody>
</table>

Captions

Add a <caption> to inform users with screan readers about the function of a table and help them decide if they want to read it.

List of users
#	First	Last	Role
1	Lorem	Ipsum	Staff
2	Jon	Snow	Bastard
3	Mouse the Bird		Strange animal


<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Lorem</td>
      <td>Ipsum</td>
      <td>Staff</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jon</td>
      <td>Snow</td>
      <td>Bastard</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Mouse the Bird</td>
      <td>Strange animal</td>
    </tr>
  </tbody>
</table>

Responsive tables

Responsive tables allow tables to be scrolled horizontally. Make any table responsive across all viewports by wrapping a .table with .table-responsive, or make it responsive using .table-responsive-{breakpoint} where breakpoint can be any breakpoint (sm, md, lg, xl).

These tables may appear broken until their responsive styles apply at specific viewport widths.

#	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">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
          <th scope="col">Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
          <td>Cell</td>
        </tr>
      </tbody>
    </table>
  </div>

Spinners Tags