My Table
For basic styling—light padding and only horizontal dividers—add the base class
.table
to any <table>
.
Name | Phone Number | Date of Birth | Active? |
---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
Linda G. Smith | 606-253-1207 | May 3, 1962 |
|
Inverse Table
You can also invert the colors—with light text on dark backgrounds—with
.table-dark
.
Name | Phone Number | Date of Birth | Active? |
---|---|---|---|
Risa D. Pearson | 336-508-2157 | July 24, 1950 |
|
Ann C. Thompson | 646-473-2057 | January 25, 1959 |
|
Paul J. Friend | 281-308-0793 | September 1, 1939 |
|
Sean C. Nguyen | 269-714-6825 | February 5, 1994 |
|
Striped Rows
Striped Columns
Table Head Options
Use one of two modifier classes to make <thead>
s appear light or dark gray.
Product | Courier | Process | Status |
---|---|---|---|
Samsung Galaxy S24 | DHL |
|
Pending |
Apple iPad 10 | FedEx |
|
Shipped |
Google Pixel 8 | UPS |
|
Processing |
Hoverable Rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
Product | Courier | Process | Status |
---|---|---|---|
Apple Watch | USPS |
|
Delayed |
Kindle Scribe | DHL |
|
Pending |
Galaxy Buds | FedEx |
|
Delivered |