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 |