Table Example

Hii Sekai
July 28, 2018

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

If you need the tables with horizontal scroll, add the table-scroll class to the <table> element.

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

Template

Download Now