Tables

Basic example

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

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Accented tables

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Striped columns

Use .table-striped-columns to add zebra-striping to any table column.

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Active tables

Highlight a table row or cell by adding a .table-active class.

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Table borders

Bordered tables

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

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Borderless Table

Add .table-borderless for a table without borders.

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Small tables

Add .table-sm to make any .table more compact by cutting all cell padding in half.

# First Last Handle
1 Katherine Joel @Commodo
2 Meyer Warner @a
3 Hannah Fitzgerald @cillum

Responsive tables

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# 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

Breakpoint specific

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. 

<div class="table-responsive-{breakpoint}">
    <table class="table">
        ...
    </table>
</div>