Table

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

Row border

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

Cell Border

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

Table Color

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