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>