Panely
Garrett Winters
UX DesignerLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
2 min agoLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
1 min agoLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
2 min ago
Brielle Williamson
Software EngineerTable
Panely
Basic Table
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 |
Contextual colors
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 |
Hoverable
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 |
Border variants
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 |
Striped
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 |
Responsive table
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 |
Small table
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 | ||
