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>