Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
The table modules copies the Bootstrap table module
with one small difference. There's no need to apply the default .table class.
Tables do work without any class applied.
Furthermore there's one added class for responsive content tables.
Default table
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
<table>
...
</table>
Condensed table
Decreases padding on table cells
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
<table class="table-condensed">
...
</table>
Bordered table
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
<table class="table-bordered">
...
</table>
Striped rows
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
<table class="table-striped">
...
</table>
Hovered rows
Album |
Year |
Price |
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
<table class="table-hover">
...
</table>
Scrollable content tables
Although all tables will be responsive by default, there are
special classes to make large tables work better on tiny screens.
Wrap tables with .table-scroll
to enable overflow scrolling within the tables container.
<div class="table-scroll">
<table class="table-bordered">
...
</table>
</div>
Responsive content tables
The default way to display tabular data will be replaced with a list
type view. Every table row becomes a stack of its cells.
Album |
Year |
Price |
Are You Experienced |
1967 |
$10.00 |
Axis: Bold as Love |
1967 |
$12.00 |
Electric Ladyland |
1968 |
$10.00 |
Band of Gypsys |
1970 |
$12.00 |
<table class="table-responsive">
...
</table>
There is a special requirement for this technique to properly work.
Every cell of the table, needs a data attribute wich contains the heading
of the cell. This attribute needs to be data-th
:
<tr>
<td data-th="Album">...</td>
</tr>
Warning
The stacked table content effect will only occur on tiny displays. It is
not compatible to be combined with the .table-condensed
class yet.
Message colored rows
Table rows/cells can be colored, by setting a class on the table row element.
Class |
Description |
.success |
Indicates a successful or positive action |
.warning |
Indicates a warning that might need attention |
.danger |
Indicates a dangerous or potentially negative action |
.active |
Applies the hover color to a particular row or cell |
<tr class="warning">
<td>.warning</td>
<td>Indicates a warning that might need attention</td>
</tr>