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.

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

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