close

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Basic

Using the most basic table markup, here’s how .table-based tables look in Bootstrap.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
Striped Rows

Use .table-striped to add zebra-striping to any table row within the <tbody>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
    ...
</table>
Table foot
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer 
<table class="table">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
    <tfoot>
        ...
    </tfoot>
</table>

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm">
    <caption>List of users</caption>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>
Bordered Tables

Add .table-bordered for borders on all sides of the table and cells.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
    ...
</table>
Borderless Table

Add .table-borderless for a table without borders.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-borderless">
    ...
</table>
Table Head Options

Use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
    <thead class="table-dark">
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>
Hoverable Rows

Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
    ...
</table>
Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

# First Last Handle
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 Larry the Bird @twitter 
<table class="table table-striped">
    <thead>
        ...
    </thead>
    <tbody>
        ...
        <tr>
            <td colspan="4">
                <table class="table mb-0">
                    ...
                </table>
            </td>
        </tr>
        ...
    </tbody>
</table>
Responsive Tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

These tables may appear broken until their responsive styles apply at specific viewport widths.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<div class="table-responsive-lg">
    <table class="table">
        ...
    </table>
</div>
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<div class="table-responsive-md">
    <table class="table">
        ...
    </table>
</div>