Basic example
For basic styling–light padding and only horizontal dividers–add the base class .table
to any <table>
.
# |
Lorem ipsum |
dolor sit amet |
sed do eiusmod |
1 |
Ut enim ad minim |
labore et dolore |
magna aliqua |
2 |
tempor incididunt |
nostrud exercitation |
minim veniam |
3 |
adipisicing elit |
consectetur |
commodo consequat |
Striped rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
# |
Lorem ipsum |
dolor sit amet |
sed do eiusmod |
1 |
Ut enim ad minim |
labore et dolore |
magna aliqua |
2 |
tempor incididunt |
nostrud exercitation |
minim veniam |
3 |
adipisicing elit |
consectetur |
commodo consequat |
Hover rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# |
Lorem ipsum |
dolor sit amet |
sed do eiusmod |
1 |
Ut enim ad minim |
labore et dolore |
magna aliqua |
2 |
tempor incididunt |
nostrud exercitation |
minim veniam |
3 |
adipisicing elit |
consectetur |
commodo consequat |
Condensed table
Add .table-condensed
to make tables more compact by cutting cell padding in half.
# |
Lorem ipsum |
dolor sit amet |
sed do eiusmod |
1 |
Ut enim ad minim |
labore et dolore |
magna aliqua |
2 |
tempor incididunt |
nostrud exercitation |
minim veniam |
3 |
adipisicing elit |
consectetur |
commodo consequat |