Table
Simple and sleek tables to clearly display your information.
Usage
Tables should be prefixed with the table class. This will give padding to the table
and define borders, as well as making the borders collapsible.
Note: You can have any combination of the class below.
| # |
Name |
Country |
City |
| 1 |
Tim Davis |
England |
London |
| 2 |
Chaem Choi |
Thailand |
Bangkok |
| 3 |
Jose Mari |
Philippines |
Cebu |
| 4 |
Andrea Scott |
Hungary |
Budapest |
| 5 |
Stephanie Jones |
Australia |
Queensland |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tim Davis</td>
<td>England</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Chaem Choi</td>
<td>Thailand</td>
<td>Bangkok</td>
</tr>
<tr>
<td>3</td>
<td>Jose Mari</td>
<td>Philippines</td>
<td>Cebu</td>
</tr>
<tr>
<td>4</td>
<td>Andrea Scott</td>
<td>Hungary</td>
<td>Budapest</td>
</tr>
<tr>
<td>5</td>
<td>Stephanie Jones</td>
<td>Australia</td>
<td>Queensland</td>
</tr>
</tbody>
</table>
Striped
To make every other table row a striped color, simply add the table-striped
alongside the table, see below.
| # |
Name |
Country |
City |
| 1 |
Tim Davis |
England |
London |
| 2 |
Chaem Choi |
Thailand |
Bangkok |
| 3 |
Jose Mari |
Philippines |
Cebu |
| 4 |
Andrea Scott |
Hungary |
Budapest |
| 5 |
Stephanie Jones |
Australia |
Queensland |
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tim Davis</td>
<td>England</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Chaem Choi</td>
<td>Thailand</td>
<td>Bangkok</td>
</tr>
<tr>
<td>3</td>
<td>Jose Mari</td>
<td>Philippines</td>
<td>Cebu</td>
</tr>
<tr>
<td>4</td>
<td>Andrea Scott</td>
<td>Hungary</td>
<td>Budapest</td>
</tr>
<tr>
<td>5</td>
<td>Stephanie Jones</td>
<td>Australia</td>
<td>Queensland</td>
</tr>
</tbody>
</table>
Hover
To create a hover effect on the table rows, just add the table-hover class alongside
the table, see below.
| # |
Name |
Country |
City |
| 1 |
Tim Davis |
England |
London |
| 2 |
Chaem Choi |
Thailand |
Bangkok |
| 3 |
Jose Mari |
Philippines |
Cebu |
| 4 |
Andrea Scott |
Hungary |
Budapest |
| 5 |
Stephanie Jones |
Australia |
Queensland |
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tim Davis</td>
<td>England</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Chaem Choi</td>
<td>Thailand</td>
<td>Bangkok</td>
</tr>
<tr>
<td>3</td>
<td>Jose Mari</td>
<td>Philippines</td>
<td>Cebu</td>
</tr>
<tr>
<td>4</td>
<td>Andrea Scott</td>
<td>Hungary</td>
<td>Budapest</td>
</tr>
<tr>
<td>5</td>
<td>Stephanie Jones</td>
<td>Australia</td>
<td>Queensland</td>
</tr>
</tbody>
</table>
Scroll
In order for the table to become responsive, or have an overflow-x: auto; property,
wrap the table inside a div and add the table-scroll
class.
This will prevent text wrapping and enable a scroll behaviour. Go ahead and resize the screen.
<div class="table-scroll">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
<th>Zip</th>
<th>Subscribed</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tim Davis</td>
<td>England</td>
<td>London</td>
<td>TR4 2YT</td>
<td>Yes</td>
</tr>
<tr>
<td>2</td>
<td>Chaem Choi</td>
<td>Thailand</td>
<td>Bangkok</td>
<td>10520</td>
<td>Yes</td>
</tr>
<tr>
<td>3</td>
<td>Jose Mari</td>
<td>Philippines</td>
<td>Cebu</td>
<td>24502</td>
<td>No</td>
</tr>
<tr>
<td>4</td>
<td>Andrea Scott</td>
<td>Hungary</td>
<td>Budapest</td>
<td>423001</td>
<td>No</td>
</tr>
<tr>
<td>5</td>
<td>Stephanie Jones</td>
<td>Australia</td>
<td>Queensland</td>
<td>292125</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
Icon
The possibilities are endless with the table component, you can use them in conjunction with any icons, see
below for the full works.
<div class="table-scroll">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
<th>Zip</th>
<th class="center-text">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tim Davis</td>
<td>England</td>
<td>London</td>
<td>TR4 2YT</td>
<td>
<div class="d-flex flex-nowrap justify-content-end">
<i class="fas fa-user-cog c-info mr-1"></i>
<i class="fas fa-pencil-alt c-success mr-1"></i>
<i class="fas fa-times c-danger"></i>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Chaem Choi</td>
<td>Thailand</td>
<td>Bangkok</td>
<td>10520</td>
<td>
<div class="d-flex flex-nowrap justify-content-end">
<i class="fas fa-user-cog c-info mr-1"></i>
<i class="fas fa-pencil-alt c-success mr-1"></i>
<i class="fas fa-times c-danger"></i>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>Jose Mari</td>
<td>Philippines</td>
<td>Cebu</td>
<td>24502</td>
<td>
<div class="d-flex flex-nowrap justify-content-end">
<i class="fas fa-user-cog c-info mr-1"></i>
<i class="fas fa-pencil-alt c-success mr-1"></i>
<i class="fas fa-times c-danger"></i>
</div>
</td>
</tr>
<tr>
<td>4</td>
<td>Andrea Scott</td>
<td>Hungary</td>
<td>Budapest</td>
<td>423001</td>
<td>
<div class="d-flex flex-nowrap justify-content-end">
<i class="fas fa-user-cog c-info mr-1"></i>
<i class="fas fa-pencil-alt c-success mr-1"></i>
<i class="fas fa-times c-danger"></i>
</div>
</td>
</tr>
<tr>
<td>5</td>
<td>Stephanie Jones</td>
<td>Australia</td>
<td>Queensland</td>
<td>292125</td>
<td>
<div class="d-flex flex-nowrap justify-content-end">
<i class="fas fa-user-cog c-info mr-1"></i>
<i class="fas fa-pencil-alt c-success mr-1"></i>
<i class="fas fa-times c-danger"></i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Variables
Manipulate the tables padding, colors and font sizes with the variables below.
