Table Reference Guide
Basic example
For basic styling–light padding and only horizontal dividers–add the base class .table to any <table>.
| # | Lorem ipsum | dolor sit amet | sed do eiusmod |
|---|---|---|---|
| 1 | Ut enim ad minim | labore et dolore | magna aliqua |
| 2 | tempor incididunt | nostrud exercitation | minim veniam |
| 3 | adipisicing elit | consectetur | commodo consequat |
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | Lorem ipsum | dolor sit amet | sed do eiusmod |
|---|---|---|---|
| 1 | Ut enim ad minim | labore et dolore | magna aliqua |
| 2 | tempor incididunt | nostrud exercitation | minim veniam |
| 3 | adipisicing elit | consectetur | commodo consequat |
Hover rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | Lorem ipsum | dolor sit amet | sed do eiusmod |
|---|---|---|---|
| 1 | Ut enim ad minim | labore et dolore | magna aliqua |
| 2 | tempor incididunt | nostrud exercitation | minim veniam |
| 3 | adipisicing elit | consectetur | commodo consequat |
Condensed table
Add .table-condensed to make tables more compact by cutting cell padding in half.
| # | Lorem ipsum | dolor sit amet | sed do eiusmod |
|---|---|---|---|
| 1 | Ut enim ad minim | labore et dolore | magna aliqua |
| 2 | tempor incididunt | nostrud exercitation | minim veniam |
| 3 | adipisicing elit | consectetur | commodo consequat |