Tom Manchester
(Works at )
Luke Williams
(Lives in )
People near:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sunt in culpa quifdaasd quis.
06 Dec, 2018Duis non semper sapien. Morbi imperdiet velit in bibendum lobortis. Integer arcu urna, elementum in pellentesque nec, finibus at nisi.
19 Nov, 2017Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Using the most basic table markup, here’s how .table
-based tables look in Bootstrap.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
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 |
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 |
Add .table-borderless
for a table without borders.
# | 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 |
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 |
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table
with .table-responsive
.
# | 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 |