Table Elements page header description goes here...
Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
Table head options
Similar to tables and dark tables, use the modifier classes .thead-light
or .thead-dark
to make <thead>
s appear light or dark gray.
Striped rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
Borderless table
Hoverable rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
Small table
Add .table-sm
to make tables more compact by cutting cell padding in half.
Contextual classes
Use contextual classes to color table rows or individual cells.
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table
with .table-responsive
. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}
.