PayPalGitHub

Tables

Tables include default styles for tables and data sets.

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

Add the table class to any <table> element. The class will add padding, border and emphasized table header. 

<table class="table">
  <thead>
    <tr>
      <th>name</th>
      <th>genre</th>
      <th>release date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

Striped tables

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.

Use the active class to make <tr> element highlighted.

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>name</th>
      <th>genre</th>
      <th>release date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

Scrollable tables

Name Rating Duration Genre Release date Director
The Shawshank Redemption R 2h 22min Crime, Drama 14 October 1994 Frank Darabont
The Godfather R 2h 55min Crime, Drama 24 March 1972 Francis Ford Coppola
Schindler's List R 3h 15min Biography, Drama, History 4 February 1994 Steven Spielberg
Se7en R 2h 7min Crime, Drama, Mystery 22 September 1995 David Fincher

Add the table-scroll class to <table> to have a horizontally scrollable table.

<table class="table table-scroll">
  ...
</table>