Tables
Table Basic
Just add the base class
.table
to any
<table>
, then extend with custom styles.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Table Head Options
Use the modifier classes
.table-light
to make
<thead>
appear light gray.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Table Striped
Use
.table-striped
to add zebra-striping to any table row within the
<tbody>
.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Table Bordered
Add
.table-bordered
for borders on all sides of the table and cells.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Table Bordered Color
Border color utilities like
.border-*
be added to change colors.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Table Borderless
Add
.table-borderless
for a table without borders.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Table Hover
Add
.table-hover
to enable a hover state on table rows within a
<tbody>
.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Nesting
Border styles, active styles, and table variants are not inherited by nested tables..
| Project name | Due Date | Priority | Members | Actions | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| June 2 | Medium |
+5
|
|||||||||||||||||
|
|||||||||||||||||||
| Sept 20 | Medium |
+5
|
|||||||||||||||||
Table Active
Highlight a table row or cell by adding a
.table-active
class.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|
Table Small
Add
.table-sm
to make tables more compact by cutting cell padding in half.
| Project name | Due Date | Priority | Members | Actions |
|---|---|---|---|---|
| June 2 | Medium |
+5
|
||
| June 12 | High |
+5
|
||
| Aug 14 | Low |
+1
|
||
| Sept 20 | Medium |
+5
|