1. SmartAdmin
  2. Tables
  3. Basic Tables

Basic tables Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.

Basic Tables

Using the most basic table markup, here’s how .table-based tables look in SmartAdmin. You can inverse a table by using the class .table-dark
Default
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Larry the Bird @twitter
Inverse
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear custom, dark gray, white and themed.
Inverse
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Custom
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Themed
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table rows

Add .table-striped to add zebra-striping to any table, and add .table-dark for inverse pattern
Pattern
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Pattern inverse
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Bordered

Add .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 @twitter

Table Hover

Add .table-hover to enable a hover state on table rows within a <tbody>
Hoverable
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter
Inverse
# First Name Last Name Username
1 Jhon Stone @jhon
2 Lisa Nilson @lisa
3 Larry the Bird @twitter

Contextual classes

Use contextual classes to color table rows or individual cells. See the full list of color selection
# 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 Small

Add .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
Compact
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
With background
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Responsive

Make table responsive with .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