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-bold border-top-0 py-2">#</th>
                              <th class="font-weight-bold border-top-0 py-2">First</th>
                              <th class="font-weight-bold border-top-0 py-2">Last</th>
                              <th class="font-weight-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-bold border-top-0 py-2">#</th>
                              <th class="font-weight-bold border-top-0 py-2">First</th>
                              <th class="font-weight-bold border-top-0 py-2">Last</th>
                              <th class="font-weight-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>
                      
                    

Table with images

# Name Company Role Salary Tag Actions
1
Image description Dale Mack
Apple Inc. Developer $ 56,900 Manager
2
Image description Blanche Powers
Dropbox Inc. Sales Manager $ 35,450 Manager
3
Image description Alvin Meyer
Microsoft Inc. Developer $ 89,240 Manager
4
Image description Harriet Delgado
Google Inc. Designer $ 96,450 Manager
5
Image description Elsie Davis
Dell Corp. Support Manager $ 35,900 Manager
                      
                        <div class="table-responsive">
                          <table class="table table-hover mb-0">
                            <thead>
                            <tr>
                              <th>#</th>
                              <th>Name</th>
                              <th>Company</th>
                              <th>Role</th>
                              <th>Salary</th>
                              <th style="width: 135px;">Tag</th>
                              <th class="text-center">Actions</th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                              <td class="font-weight-semi-bold">1</td>
                              <td class="font-weight-semi-bold">
                                <div class="media align-items-center">
                                  <img class="u-avatar-xs rounded-circle mr-3" src="../assets/img-temp/avatars/img1.jpg" alt="Image description">
                                  <span class="media-body">Dale Mack</span>
                                </div>
                              </td>
                              <td class="font-weight-semi-bold">Apple Inc.</td>
                              <td class="font-weight-semi-bold">Developer</td>
                              <td class="font-weight-semi-bold">$ 56,900</td>
                              <td>
                                <span class="badge badge-md badge-pill badge-primary-soft">Manager</span>
                              </td>
                              <td class="text-center">
                                <!-- Actions -->
                                <div class="dropdown">
                                  <!-- Actions Invoker -->
                                  <a id="tableWithImage1MenuInvoker" class="u-icon-sm link-muted" href="#" role="button" aria-haspopup="true" aria-expanded="false"
                                     data-toggle="dropdown"
                                     data-offset="8">
                                    <span class="ti-more"></span>
                                  </a>
                                  <!-- End Actions Invoker -->

                                  <!-- Actions Menu -->
                                  <div class="dropdown-menu dropdown-menu-right" style="width: 150px;">
                                    <div class="card border-0 p-3">
                                      <ul class="list-unstyled mb-0">
                                        <li class="mb-3">
                                          <a class="d-block link-dark" href="#">Add</a>
                                        </li>
                                        <li>
                                          <a class="d-block link-dark" href="#">Remove</a>
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                  <!-- End Actions Menu -->
                                </div>
                                <!-- End Actions -->
                              </td>
                            </tr>
                            <tr>
                              <td class="font-weight-semi-bold">2</td>
                              <td class="font-weight-semi-bold">
                                <div class="media align-items-center">
                                  <img class="u-avatar-xs rounded-circle mr-3" src="../assets/img-temp/avatars/img2.jpg" alt="Image description">
                                  <span class="media-body">Blanche Powers</span>
                                </div>
                              </td>
                              <td class="font-weight-semi-bold">Dropbox Inc.</td>
                              <td class="font-weight-semi-bold">Sales Manager</td>
                              <td class="font-weight-semi-bold">$ 35,450</td>
                              <td>
                                <span class="badge badge-md badge-pill badge-primary-soft">Manager</span>
                              </td>
                              <td class="text-center">
                                <!-- Actions -->
                                <div class="dropdown">
                                  <!-- Actions Invoker -->
                                  <a id="tableWithImage2MenuInvoker" class="u-icon-sm link-muted" href="#" role="button" aria-haspopup="true" aria-expanded="false"
                                     data-toggle="dropdown"
                                     data-offset="8">
                                    <span class="ti-more"></span>
                                  </a>
                                  <!-- End Actions Invoker -->

                                  <!-- Actions Menu -->
                                  <div class="dropdown-menu dropdown-menu-right" style="width: 150px;">
                                    <div class="card border-0 p-3">
                                      <ul class="list-unstyled mb-0">
                                        <li class="mb-3">
                                          <a class="d-block link-dark" href="#">Add</a>
                                        </li>
                                        <li>
                                          <a class="d-block link-dark" href="#">Remove</a>
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                  <!-- End Actions Menu -->
                                </div>
                                <!-- End Actions -->
                              </td>
                            </tr>
                            <tr>
                              <td class="font-weight-semi-bold">3</td>
                              <td class="font-weight-semi-bold">
                                <div class="media align-items-center">
                                  <img class="u-avatar-xs rounded-circle mr-3" src="../assets/img-temp/avatars/img3.jpg" alt="Image description">
                                  <span class="media-body">Alvin Meyer</span>
                                </div>
                              </td>
                              <td class="font-weight-semi-bold">Microsoft Inc.</td>
                              <td class="font-weight-semi-bold">Developer</td>
                              <td class="font-weight-semi-bold">$ 89,240</td>
                              <td>
                                <span class="badge badge-md badge-pill badge-primary-soft">Manager</span>
                              </td>
                              <td class="text-center">
                                <!-- Actions -->
                                <div class="dropdown">
                                  <!-- Actions Invoker -->
                                  <a id="tableWithImage3MenuInvoker" class="u-icon-sm link-muted" href="#" role="button" aria-haspopup="true" aria-expanded="false"
                                     data-toggle="dropdown"
                                     data-offset="8">
                                    <span class="ti-more"></span>
                                  </a>
                                  <!-- End Actions Invoker -->

                                  <!-- Actions Menu -->
                                  <div class="dropdown-menu dropdown-menu-right" style="width: 150px;">
                                    <div class="card border-0 p-3">
                                      <ul class="list-unstyled mb-0">
                                        <li class="mb-3">
                                          <a class="d-block link-dark" href="#">Add</a>
                                        </li>
                                        <li>
                                          <a class="d-block link-dark" href="#">Remove</a>
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                  <!-- End Actions Menu -->
                                </div>
                                <!-- End Actions -->
                              </td>
                            </tr>
                            <tr>
                              <td class="font-weight-semi-bold">4</td>
                              <td class="font-weight-semi-bold">
                                <div class="media align-items-center">
                                  <img class="u-avatar-xs rounded-circle mr-3" src="../assets/img-temp/avatars/img4.jpg" alt="Image description">
                                  <span class="media-body">Harriet Delgado</span>
                                </div>
                              </td>
                              <td class="font-weight-semi-bold">Google Inc.</td>
                              <td class="font-weight-semi-bold">Designer</td>
                              <td class="font-weight-semi-bold">$ 96,450</td>
                              <td>
                                <span class="badge badge-md badge-pill badge-primary-soft">Manager</span>
                              </td>
                              <td class="text-center">
                                <!-- Actions -->
                                <div class="dropdown">
                                  <!-- Actions Invoker -->
                                  <a id="tableWithImage4MenuInvoker" class="u-icon-sm link-muted" href="#" role="button" aria-haspopup="true" aria-expanded="false"
                                     data-toggle="dropdown"
                                     data-offset="8">
                                    <span class="ti-more"></span>
                                  </a>
                                  <!-- End Actions Invoker -->

                                  <!-- Actions Menu -->
                                  <div class="dropdown-menu dropdown-menu-right" style="width: 150px;">
                                    <div class="card border-0 p-3">
                                      <ul class="list-unstyled mb-0">
                                        <li class="mb-3">
                                          <a class="d-block link-dark" href="#">Add</a>
                                        </li>
                                        <li>
                                          <a class="d-block link-dark" href="#">Remove</a>
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                  <!-- End Actions Menu -->
                                </div>
                                <!-- End Actions -->
                              </td>
                            </tr>
                            <tr>
                              <td class="font-weight-semi-bold">5</td>
                              <td class="font-weight-semi-bold">
                                <div class="media align-items-center">
                                  <img class="u-avatar-xs rounded-circle mr-3" src="../assets/img-temp/avatars/img1.jpg" alt="Image description">
                                  <span class="media-body">Elsie Davis</span>
                                </div>
                              </td>
                              <td class="font-weight-semi-bold">Dell Corp.</td>
                              <td class="font-weight-semi-bold">Support Manager</td>
                              <td class="font-weight-semi-bold">$ 35,900</td>
                              <td>
                                <span class="badge badge-md badge-pill badge-primary-soft">Manager</span>
                              </td>
                              <td class="text-center">
                                <!-- Actions -->
                                <div class="dropdown">
                                  <!-- Actions Invoker -->
                                  <a id="tableWithImage5MenuInvoker" class="u-icon-sm link-muted" href="#" role="button" aria-haspopup="true" aria-expanded="false"
                                     data-toggle="dropdown"
                                     data-offset="8">
                                    <span class="ti-more"></span>
                                  </a>
                                  <!-- End Actions Invoker -->

                                  <!-- Actions Menu -->
                                  <div class="dropdown-menu dropdown-menu-right" style="width: 150px;">
                                    <div class="card border-0 p-3">
                                      <ul class="list-unstyled mb-0">
                                        <li class="mb-3">
                                          <a class="d-block link-dark" href="#">Add</a>
                                        </li>
                                        <li>
                                          <a class="d-block link-dark" href="#">Remove</a>
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                  <!-- End Actions Menu -->
                                </div>
                                <!-- End Actions -->
                              </td>
                            </tr>
                            </tbody>
                          </table>
                        </div>