Using the most basic table markup, here’s how .table-based tables look.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Use contextual classes to color table rows or individual cells (e.q .table-primary).
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
Add .table-hover to enable hover effect on table rows within a <tbody>.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Change the table border style by applying .table-{bordered|borderless}.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Make your tables always responsive, use .table-responsive for horizontally scrolling tables.
Use .table-responsive-{sm|md|lg|xl} as needed to create responsive tables up to a particular breakpoint.
| # | Head | Head | Head | Head | Head | Head | Head | Head | Head | Head | Head | Head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
| 2 | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
| 3 | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
Add .table-sm to make tables more compact by cutting cell padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||