tables.less

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.

# 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
<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>