Adrian Herman
System Admin
Welcome to SmartHR
Adrian Herman
System Admin
Welcome to SmartHR
Adrian Herman
System Admin
Basic Tables
Basic Example
For basic styling—light padding and only horizontal dividers—add the base class
.table to any <table>.
| User | Status | Action | |
|---|---|---|---|
Mark
|
[email protected] | Active |
|
|
Jacob
|
[email protected] | Inactive |
|
Larry
|
[email protected] | Active |
|
Dark Table
You can also invert the colors—with light text on dark
backgrounds—with .table-dark.
| User | Status | Action | |
|---|---|---|---|
|
Mark
|
[email protected] | Active | |
|
Jacob
|
[email protected] | Inactive | |
|
Larry
|
[email protected] | Active |
Table Head
Use one of two modifier classes to make
<thead>s appear light or dark gray.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley |
Striped Rows
Use .table-striped to add zebra-striping to any
table row within the <tbody>.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley |
Table Border Color
Add .table-bordered & .border-* for
colored borders on all sides of the table and cells.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley |
Vertical Alignment
Table cells in <tbody> inherit their
alignment from <table> and are aligned to the the top by
default. Use the vertical align classes to re-align where needed.
| # | First Name | Last Name | Action |
|---|---|---|---|
| 1 | Mark | Otto | |
| 2 | Jacob | Thornton | |
| 3 | Larry | Dooley | |
| 4 | Jacob | Thornton |
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
| # | First | Last | Handle | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | |||||||||
|
||||||||||||
| 3 | Jacob | Thornton | @fat | |||||||||
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 |
Captions
A <caption> functions like a heading for a
table. It helps users with screen readers to find a table and understand what it’s
about and decide if they want to read it.
| # | First Name | Last Name | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Dooley |
Responsive Table
Create responsive tables by wrapping any .table in
.table-responsive to make them scroll horizontally on small devices
(under 768px).
