Apply all the classes to table container .table-container
Class | Utility |
.table-container |
Sets the border color and width 100% |
.table-head |
Set the color of table head |
.table-striped |
Set background color of alternate row |
.row-border |
Set the border of all rows |
.cell-border |
Set the border of all cells |
Use class .table-head
<div class="table-container table-head">
<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
Col 1 | Col 2 |
10 | 11 |
20 | 21 |
30 | 31 |
Use class .row-border
<div class="table-container table-head row-border">
<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
Col 1 | Col 2 |
10 | 11 |
20 | 21 |
30 | 31 |
Use class .cell-border
<div class="table-container table-head cell-border">
<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
Col 1 | Col 2 |
10 | 11 |
20 | 21 |
30 | 31 |
To change the color of table add background color .bg-slategray
, border color .bc-slategray-light
and text color .slategray-light
style to table
tag.
Similarly you can change the color of thead
<div class="table-container text-center cell-border">
<table class="bg-slategray bc-slategray-light slategray-light">
<thead class="white bg-slategray-dark">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
Col 1 | Col 2 |
10 | 11 |
20 | 21 |
30 | 31 |