Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
You can also invert the colors—with light text on dark backgrounds—with
.table-dark
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Similar to tables and dark tables, use the modifier classes
.thead-light
or
.thead-dark
to make
<thead>
s appear light or dark gray.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Use
.table-striped
to add zebra-striping to any table row within the
<tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Add
.table-bordered
for borders on all sides of the table and cells.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Add
.table-hover
to enable a hover state on table rows within a
<tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Add
.table-sm
to make tables more compact by cutting cell padding in half.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Use contextual classes to color table rows or individual cells.
Class | Heading | Heading |
---|---|---|
Active | Cell | Cell |
Default | Cell | Cell |
Primary | Cell | Cell |
Secondary | Cell | Cell |
Success | Cell | Cell |
Danger | Cell | Cell |
Warning | Cell | Cell |
Info | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
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}
.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Highlight a table row or cell by adding a
.table-active
class.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
To prevent
any
styles from leaking to nested tables, we use the child combinator (
>
) selector in our CSS. Since we need to target all the
td
s and
th
s in the
thead
,
tbody
, and
tfoot
, our selector would look pretty long without it. As such, we use the rather odd looking
.table > :not(caption) > * > *
selector to target all
td
s and
th
s of the
.table
, but none of any potential nested tables.
Similar to tables and dark tables, use the modifier classes
.table-light
or
.table-dark
to make
<thead>
s appear light or dark gray.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
A
<caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
You can also put the
<caption>
on the top of the table with
.caption-top
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |