.table
-based tables look in SmartAdmin. You can inverse a table by using the class .table-dark
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Larry the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<thead>
s appear custom, dark gray, white and themed.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
.table-striped
to add zebra-striping to any table, and add .table-dark
for inverse pattern
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
.table-bordered
for borders on all sides of the table and cells.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
.table-hover
to enable a hover state on table rows within a <tbody>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Jhon | Stone | @jhon |
2 | Lisa | Nilson | @lisa |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Jhon | Stone | @jhon |
2 | Lisa | Nilson | @lisa |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Lisa | Nilson | @lisa |
2 | Lisa | Nilson | @lisa |
3 | Nick | looper | @king |
4 | Joan | thestar | @joan |
5 | Sean | coder | @coder |
6 | Sean | coder | @coder |
.table-sm
to make tables more compact by cutting cell padding in half. See the full list of color selection to add backgrounds as well
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
.table-responsive
. Maximum breakpoint can be applied by adding .table-responsive-sm
, .table-responsive-ms
, .table-responsive-lg
, .table-responsive-xl
# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |