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

### Vertical clipping/truncation

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.

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