Tables

Example

Use the .table class on a table to style it.

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>E-mail</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Michael Scott</td>
            <td>worldsbestboss@yahoo.com</td>
            <td>Office Manager</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Dwight Schrute</td>
            <td>mr.beet@battlestargalactica.com</td>
            <td>Sales</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Pam Beesly</td>
            <td>pam@dunder-mifflin.com</td>
            <td>Reception</td>
        </tr>
    </tbody>
</table>

Variants

<table class="table table-dark">...</table>

<tr class="table-dark">...</tr>

<tr>
    <td class="table-dark">...</td>
</tr>

Small table

<table class="table table-sm">
    ...
</table>

Bordered table

<table class="table table-bordered">
    ...
</table>

Borderless table

<table class="table table-borderless">
    ...
</table>

Striped rows

<table class="table table-striped">
    ...
</table>

Hoverable row

<table class="table table-hover">
    ...
</table>

Table head

<table class="table">
    <thead class="table-dark">
        ...
    </thead>
</table>

<table class="table">
    <thead class="table-light">
        ...
    </thead>
</table>

Table foot

<table class="table">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
    <tfoot>
        ...
    </tfoot>
</table>

Captions

<table class="table">
    <caption>Employees of Dunder-Mifflin</caption>
    <thead>
        ...
    </thead>
</table>

Responsive table

Instead of letting the table overflow its parent, the table can be scrollable. The table is wrapped with a div with the .table-responsive class.

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

The responsive class can be used with all the breakpoints to make the responsiveness kick in at a certain viewport size.

<div class="table-responsive-sm">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>E-mail</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Michael Scott</td>
                <td>worldsbestboss@yahoo.com</td>
                <td>Office Manager</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Dwight Schrute</td>
                <td>mr.beet@battlestargalactica.com</td>
                <td>Sales</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Pam Beesly</td>
                <td>pam@dunder-mifflin.com</td>
                <td>Reception</td>
            </tr>
        </tbody>
    </table>
</div>