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>
        
      
anchor link to top of page