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

Use .table-striped to add zebra-striping to any table row within the <tbody>.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994

Striped Columns

Use .table-striped-columns to add zebra-striping to any table column.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994

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
Theme Settings
Color Scheme
Light
Dark
Layout Mode
Fluid
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Sidebar Size
Default
Compact
Condensed
Hover View
Full Layout
Hidden
Container Width
Layout Position
Buy Now