- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
| Person | Most interest in | Age |
|---|---|---|
| Chris | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 22 |
| Dennis | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 45 |
| Sarah | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 29 |
| Karen | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 36 |
| Karen | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 36 |
| Average age | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 36 |
💻 HTML Code
| Person | Most interest in | Age |
|---|---|---|
| Chris | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 22 |
| Dennis | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 45 |
| Sarah | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 29 |
| Karen | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 36 |
| Karen | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 36 |
| Average age | Lorem ipsum dolor sit Lorem ipsum dolor sit. orem ipsum dolor sit Lorem ipsum dolor sit. | 36 |
⚙️ Options
Add these optional classes on .table to change
borders, spacing or striping.
.table-sm
Smaller cell padding.
.table-md
Medium padding (custom value).
.table-lg
Larger, more spacious rows.
.table-borderless
Removes all cell borders.
.table-bordered
Full grid borders on all cells.
.table-hover
Highlights a row on hover.
.table-striped
Stripes odd rows in tbody.
.table-striped-even
Stripes even rows in tbody.
.table-striped-columns
Stripes odd columns (head, body, foot).
.table-striped-columns-even
Stripes even columns.
.table-group-divider
Adds a strong divider above the first row in a group (apply on tbody).
.table-responsive
Wraps the table to enable horizontal scroll on small screens.
⚙️ Variables CSS
| Variable | Description |
|---|---|
--table-active-bg-color |
Background color applied when a table row is active or selected. |
--table-bg-color |
Background color of the table. |
--table-border-color |
Border color of the table. |
--table-border-divider-color |
Color of the internal row/column dividers. |
--table-border-divider-style |
Border style of the table’s internal dividers. |
--table-border-divider-width |
Thickness of inner dividers between table rows and columns. |
--table-border-style |
Border style of the table. |
--table-border-width |
Thickness of the table border. |
--table-hover-bg-color |
Background color applied when hovering table rows. |
--table-padding |
Default padding inside table cells. |
--table-padding-lg |
Padding for large-sized table cells. |
--table-padding-md |
Padding for medium-sized table cells. |
--table-padding-sm |
Padding for small-sized table cells. |
--table-text-color |
Text color used inside the table. |