View on GitHub

Tables extended

Custom additions to the Table component.

The Liander Special

This table variant wil turn into a sort of definition list mobile.

Add .table-liander to the table and an attribute data-th with the corresponding th value to all table cells.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table table-liander">
  <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 data-th="#" scope="row">1</th>
      <td data-th="First">Mark</td>
      <td data-th="Last">Otto</td>
      <td data-th="Handle">@mdo</td>
    </tr>
    <tr>
      <th data-th="#" scope="row">2</th>
      <td data-th="First">Jacob</td>
      <td data-th="Last">Thornton</td>
      <td data-th="Handle">@fat</td>
    </tr>
    <tr>
      <th data-th="#" scope="row">3</th>
      <td data-th="First">Larry</td>
      <td data-th="Last">the Bird</td>
      <td data-th="Handle">@twitter</td>
    </tr>
  </tbody>
</table>