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

Basic example

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

Variants

Use contextual classes to color tables,table rows or individual cells.

<!-- On tables --><table class="table-primary">...</table><table class="table-secondary">...</table><table class="table-success">...</table><table class="table-danger">...</table><table class="table-warning">...</table><table class="table-info">...</table><table class="table-light">...</table><table class="table-dark">...</table><!-- On rows --><tr class="table-primary">...</tr><tr class="table-secondary">...</tr><tr class="table-success">...</tr><tr class="table-danger">...</tr><tr class="table-warning">...</tr><tr class="table-info">...</tr><tr class="table-light">...</tr><tr class="table-dark">...</tr><!-- On cells(`td` or `th`) --><tr><td class="table-primary">...</td><td class="table-secondary">...</td><td class="table-success">...</td><td class="table-danger">...</td><td class="table-warning">...</td><td class="table-info">...</td><td class="table-light">...</td><td class="table-dark">...</td></tr>

Accented tables

Striped rows

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

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

These classes can also be added to table variants:

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

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

Hoverable rows

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

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

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

These hoverable rows can also be combined with the striped variant:

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

Active tables

Highlight a table row or cell by adding a .table-activeclass.

<table class="table"><thead>... </thead><tbody><tr class="table-active">... </tr><tr>... </tr><tr><th>3</th><td colspan="2" class="table-active">Larry the Bird</td><td>@twitter</td></tr></tbody></table>

Table borders

Bordered tables

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

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

Border color utilities can be added to change colors:

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

Tables without borders

Add .table-borderlessfor a table without borders.

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

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

Small tables

Add .table-smto make any .tablemore compact by cutting all cell paddingin half.

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

Anatomy

Table head

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

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

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

Table foot

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

Captions

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.

<table class="table"><caption>List of users</caption><thead>... </thead><tbody>... </tbody></table>

You can also put the <caption>on the top of the table with .caption-top.

<table class="table caption-top"><caption>List of users</caption><thead>... </thead><tbody>... </tbody></table>

Always responsive

Across every breakpoint,use .table-responsivefor horizontally scrolling tables.

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

Javascript Responsive Table

For mobile-compatible tables,add the .table-responsive-stackclass.

<table class="table table-bordered table-striped table-responsive-stack"><thead><tr><th>Name</th><th>Color</th><th>Taste</th></tr></thead><tbody><tr><td>Apple</td><td>Green and Red</td><td>Sweet and Tart</td></tr><tr><td>Banana</td><td>Yellow</td><td>Sweet and Mushy</td></tr><tr><td>Mango</td><td>Yellowish Green</td><td>Tangy</td></tr><tr><td>Orange</td><td>Orange</td><td>Sweet and Tangy</td></tr><tr><td>Blueberry</td><td>Blue</td><td>Mild Sweetness</td></tr></tbody></table>