Basic Table
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.
| # | Browser | Creator | Software license | Current layout engine | |
|---|---|---|---|---|---|
| 1 | Google Chrome | Terms of Service | Blink | ||
| 2 | Internet Explorer | Microsoft, Spyglass | Proprietary | Trident | |
| 3 | Mozilla Firefox | Mozilla Foundation | MPR | Gecko | |
| 4 | Safari | Apple Inc. | Proprietary | WebKit | |
| 5 | Opera | Opera Software | Proprietary | Presto |
Stylish Table
Use
.table-stylish
to give a new look to the table.
| # | Browser | Creator | Software license | Current layout engine | |
|---|---|---|---|---|---|
| 1 | Google Chrome | Terms of Service | Blink | ||
| 2 | Internet Explorer | Microsoft, Spyglass | Proprietary | Trident | |
| 3 | Mozilla Firefox | Mozilla Foundation | MPR | Gecko | |
| 4 | Safari | Apple Inc. | Proprietary | WebKit | |
| 5 | Opera | Opera Software | Proprietary | Presto |
Striped rows
Use
.table-striped
to add zebra-striping to any table row within the
<tbody>
.
| Photo | Full Name | Role | Phone | ||
|---|---|---|---|---|---|
 |
Peter Clark | UI Designer | peter@example.com | (641)-734-4763 | |
 |
Nicole Bell | Content Designer | nicole@example.com | (741)-034-4573 | |
 |
Steven Thompson | Visual Designer | steven@example.com | (471)-543-4073 | |
 |
Ella Patterson | Web Editor | ella@example.com | (799)-994-9999 | |
 |
Kenneth Ross | Senior Designer | kenneth@example.com | (111)-114-1173 |
Condensed table
Add
.table-condensed
to make tables more compact by cutting cell padding in half.
| Clicks | Update | Status | |
|---|---|---|---|
| alpha.com | 3,330 | Feb 13 | Expiring |
| beta.com | 3,330 | Jen 15 | Active |
| gamma.com | 3,330 | Mar 09 | Expired |
| delta.com | 3,330 | Feb 10 | Flagged |
| epsilon.com | 3,330 | Feb 18 | Active |
| zeta.com | 3,330 | Feb 13 | Expiring |
| eta.com | 3,330 | Jen 15 | Active |
| theta.com | 3,330 | Mar 09 | Expired |
| iota.com | 3,330 | Feb 10 | Flagged |
| kappa.com | 3,330 | Feb 18 | Active |
Bordered table
Add
.table-bordered
for borders on all sides of the table and cells.
| Domain | Clicks | Update | Status |
|---|---|---|---|
| alpha.com | 3,330 | Feb 13 | Expiring |
| beta.com | 3,330 | Jen 15 | Active |
| gamma.com | 3,330 | Mar 09 | Expired |
| delta.com | 3,330 | Feb 10 | Flagged |
| epsilon.com | 3,330 | Feb 18 | Active |
| zeta.com | 3,330 | Feb 13 | Expiring |
| eta.com | 3,330 | Jen 15 | Active |
| theta.com | 3,330 | Mar 09 | Expired |
| iota.com | 3,330 | Feb 10 | Flagged |
| kappa.com | 3,330 | Feb 18 | Active |
Contextual classes
Use contextual classes to color table rows or individual cells.
| # | 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 |
