Created by: sinrise
This adds some new CSS to tables, allowing tabular data to be displayed in a 'tile' format (resembling Bootstrap panel style) for use with smaller screens, if horizontal scrolling is not desired. It is triggered with a media query on the screen-sm-min. Add the class .table-reflow
and the a second set of labels wrapped in <b>
tags to enable table reflow. When triggered, the <thead>
is set to display: none;
and the secondary labels are shown, with a colon and space added via CSS. A bottom margin is added to separate the 'tiles'.
Code example:
<table class="table table-reflow">
<thead>
<tr>
<th>Line #</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Item Location</th>
<th>Item Serial #</th>
<th>Admin</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<b>Line #</b>
1
</td>
<td>
<b>Item Name</b>
Item 01
</td>
<td>
<b>Item Description</b>
This is an example of a long description for item number 01.
</td>
<td>
<b>Item Location</b>
LOC1231
</td>
<td>
<b>Item Serial #</b>
ABXTBL765401
</td>
<td>
<a href="#"><span class="glyphicon glyphicon-trash"></span></a>
<a href="#"><span class="glyphicon glyphicon-edit"></span></a>
</td>
</tr>
</tbody>
</table>