Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible. In addition, to improve mobile experience, all tables on mobile-screen widths are centered automatically.

Borderless Table

Tables are borderless by default.

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00

Headers

Add class="bordered" to the table tag for a bordered table

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Striped Table

Add class="striped" to the table tag for a striped table

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Hoverable Table

Add class="hoverable" to the table tag for a hoverable table

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Centered Table

Add class="centered" to the table tag to center align all the text in the table

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Responsive Table

Add class="responsive-table" to the table tag to make the table horizontally scrollable on smaller screen widths.

Name Item Name Item Price Total Status
Alvin Eclair $0.87 $1.87 Yes
Alan Jellybean $3.76 $10.87 No
Jonathan Lollipop $7.00 $12.87 Yes
Shannon KitKat $9.99 $14.87 No