Code
.table
.table-striped
.table-bordered
.table-hover
.table-dark
.table-borderless
.table-(contextual class)
.table-sm
.table-responsive-sm|md|lg|xl|xxl
Definitions
- Table
- ▪ Basic tables include light padding and horizontal dividers.
- Striped
- Alternates shaded rows.
- Bordered
- ▪ Adds borders on all sides ot the table and cells.
- Hover
- ▪ Adds gray background to rows on hover.
- Dark
- ▪ Adds a black background.
- Borderless
- ▪ Removes borders from the table.
- Color
- ▪ You can add contextual colors to cells, rows or the entire table.
- Small
- ▪ Reduces the table padding in half.
- Responsive
- ▪ Creates a responsive table that will scroll horizontally on screens that are less than the breakpoint.
Key Points
.table-active: Applies the hover color to the table row or table cell.- You can use contextual classes on the Table Head.
- To make the table responsive only when the horizontal content is too large, use just
.table-resonsivewithout a screen designation. - Bootstrap 5 puts captions below the table. To put captions at the
top, add
.caption-topto the <table> element.
Basic Tables
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table to the <table> element.
Dark Tables
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table and .table-dark to the <table> element.
Color Tables
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add color to the entire table, the head, the row or an individual cell by adding
.table-* to the appropriate tag, where * is a contextual class.
Small Tables
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table and .table-sm to the <table> element.
Striped
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table and .table-striped to the <table> element.
Hover
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table and .table-hover to the <table> element.
Bordered
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table and .table-bordered to the <table> element.
Borderless
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table and .table-borderless to the <table> element.
Dark Striped
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table, table-dark and .table-striped to the <table> element.
Dark Hover
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table, table-dark and .table-hover to the <table> element.
Dark Bordered
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table, table-dark and .table-bordered to the <table> element.
Dark Borderless
| Item | Weight | Damage |
|---|---|---|
| Dagger | 0.5 | 10 |
| Falchion | 3.3 | 30 |
| Sword | 3.2 | 34 |
Add .table, table-dark and .table-borderless to the <table> element.
Responsive Tables
| Item | Weight | Actions (Damage, Difficulty, Uses) | Damage | Distance | Shoot Damage | Class/Delta Energy | Notes | Locations |
|---|---|---|---|---|---|---|---|---|
| Dagger | 0.5 |
Throw (0,0) Stab (48,0) Slash (16,2) |
10 | 19 | 0 | 2/- | - |
Azizi Johari (01,06,17) (01,08,19) (04,32,28) |
| Falchion | 3.3 |
Swing (16,0) Parry (8,2) Chop (48,3) |
30 | 8 | 0 | 0/- | ||
| Sword | 3.2 |
Swing (16,0) Parry (8,2) Chop (48,3) |
34 | 10 | 0 | 0/- |
Wrap the entire <table> in a <div> with class .table-responsive.
Responsive Tables - Small
| Item | Weight | Actions (Damage, Difficulty, Uses) | Damage | Distance | Shoot Damage | Class/Delta Energy | Notes | Locations |
|---|---|---|---|---|---|---|---|---|
| Dagger | 0.5 |
Throw (0,0) Stab (48,0) Slash (16,2) |
10 | 19 | 0 | 2/- | - |
Azizi Johari (01,06,17) (01,08,19) (04,32,28) |
| Falchion | 3.3 |
Swing (16,0) Parry (8,2) Chop (48,3) |
30 | 8 | 0 | 0/- | ||
| Sword | 3.2 |
Swing (16,0) Parry (8,2) Chop (48,3) |
34 | 10 | 0 | 0/- |
Wrap the entire <table> in a <div> with class .table-responsive-sm.
Responsive Tables - Medium
| Item | Weight | Actions (Damage, Difficulty, Uses) | Damage | Distance | Shoot Damage | Class/Delta Energy | Notes | Locations |
|---|---|---|---|---|---|---|---|---|
| Dagger | 0.5 |
Throw (0,0) Stab (48,0) Slash (16,2) |
10 | 19 | 0 | 2/- | - |
Azizi Johari (01,06,17) (01,08,19) (04,32,28) |
| Falchion | 3.3 |
Swing (16,0) Parry (8,2) Chop (48,3) |
30 | 8 | 0 | 0/- | ||
| Sword | 3.2 |
Swing (16,0) Parry (8,2) Chop (48,3) |
34 | 10 | 0 | 0/- |
Wrap the entire <table> in a <div> with class .table-responsive-md.
Responsive Tables - Large
| Item | Weight | Actions (Damage, Difficulty, Uses) | Damage | Distance | Shoot Damage | Class/Delta Energy | Notes | Locations |
|---|---|---|---|---|---|---|---|---|
| Dagger | 0.5 |
Throw (0,0) Stab (48,0) Slash (16,2) |
10 | 19 | 0 | 2/- | - |
Azizi Johari (01,06,17) (01,08,19) (04,32,28) |
| Falchion | 3.3 |
Swing (16,0) Parry (8,2) Chop (48,3) |
30 | 8 | 0 | 0/- | ||
| Sword | 3.2 |
Swing (16,0) Parry (8,2) Chop (48,3) |
34 | 10 | 0 | 0/- |