Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class

              .table

to any

              <table>
```. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

| # | First Name | Last Name | Username |
| --- | --- | --- | --- |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @twitter |

## Striped rows

Use

          .table-striped

to add zebra-striping to any table row within the

          <tbody>

.

## Bordered table

Add

          .table-bordered

for borders on all sides of the table and cells.

| # | First Name | Last Name | Username |
| --- | --- | --- | --- |
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |

## Hover rows

Add

          .table-hover

to enable a hover state on table rows within a

          <tbody>

.

| # | First Name | Last Name | Username |
| --- | --- | --- | --- |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |

## Condensed table

Add

          .table-condensed

to make tables more compact by cutting cell padding in half.

## Contextual classes

Use contextual classes to color table rows or individual cells.

| Class | Description |
| --- | --- |
| `.active` | Applies the hover color to a particular row or cell |
| `.success` | Indicates a successful or positive action |
| `.info` | Indicates a neutral informative change or action |
| `.warning` | Indicates a warning that might need attention |
| `.danger` | Indicates a dangerous or potentially negative action |

| # | Column heading | Column heading | Column heading |
| --- | --- | --- | --- |
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |

## Responsive tables

Create responsive tables by wrapping any

          .table

in

          .table-responsive

to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
| --- | --- | --- | --- | --- | --- | --- |
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |