Tables

Tables should be used for displaying (read-only) tabular data. If you would like to display a list of objects in a tabular list, but need the additonal functionality of being able to add, edit and delete the objects in the list, please use the list-view classes. Tables are suited for display of tabular data only, and have no built-in interactive capabilities.

For basic styling—light padding and horizontal dividers—add the base class .table to any table. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

First Name Last Name Username
Alyssa Carizzalas alyssa.carizzalas
Matthew Osborn mosborn
Rathromony Ros-Yan rathromony.ros
Nathan Young nathanyoung
    
<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alyssa</td>
      <td>Carizzalas</td>
      <td>alyssa.carizzalas</td>
    </tr>
    <tr>
      <td>Matthew</td>
      <td>Osborn</td>
      <td>mosborn</td>
    </tr>
    <tr>
      <td>Rathromony</td>
      <td>Ros-Yan</td>
      <td>rathromony.ros</td>
    </tr>
    <tr>
      <td>Nathan</td>
      <td>Young</td>
      <td>nathanyoung</td>
    </tr>
  </tbody>
</table>
    
  

Responsive Tables

Create responsive tables by wrapping .table with .table-responsive to make them scroll horizontally on smaller viewports.

First Name Last Name Username Country City State Company
Alyssa Carizzalas alyssa.carizzalas United States Los Angeles California CenturyLink
Matthew Osborn mosborn United States Fargo North Dakota CenturyLink
Rathromony Ros-Yan rathromony.ros United States Seattle Washington CenturyLink
Nathan Young nathanyoung United States Seattle Washington CenturyLink
    
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
    
  
anchor link to top of page