When I started to decorate the table by bootstrap classes like table, table-hover, table-condensed, table-nomargin, table-striped… I expected that bootstrap will have some useful class for awesome responsive behaviour, but NO. Then … I must created some custom solution and here is :
I want to rendered table like this :
to something like this:
The solution is really simple. We need to add only one class to table called e.g. table-specialresponsive and specify special attribute e.g. data-title per cell for new column header which will be displayed in row, when table header th-s will be hidden:
<table class="table table-striped table-specialresponsive">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Column 1">Value 1-1</td>
<td data-title="Column 2">Value 1-2</td>
<td data-title="Column 3">Value 1-3</td>
<td data-title="Column 4">Value 1-4</td>
</tr>
<tr>
<td data-title="Column 1">Value 2-1</td>
<td data-title="Column 2">Value 2-2</td>
<td data-title="Column 3">Value 2-3</td>
<td data-title="Column 4">Value 2-4</td>
</tr>
<tr>
<td data-title="Column 1">Value 3-1</td>
<td data-title="Column 2">Value 3-2</td>
<td data-title="Column 3">Value 3-3</td>
<td data-title="Column 4">Value 3-4</td>
</tr>
</tbody>
</table>
Plus we need some CSS code. Here is:
@media only screen and (max-width: 768px) {
.table-specialresponsive > thead,
.table-specialresponsive > tbody,
.table-specialresponsive > tbody > tr,
.table-specialresponsive > thead > tr,
.table-specialresponsive > tfoot > tr,
.table-specialresponsive > tbody > tr > td,
.table-specialresponsive > thead > tr > td,
.table-specialresponsive > tfoot > tr > td,
.table-specialresponsive > tbody > tr > th,
.table-specialresponsive > thead > tr > th,
.table-specialresponsive > tfoot > tr > th
{
display: block;
}
.table-specialresponsive thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.table-specialresponsive tr {
border-top: 1px solid #ccc;
}
.table-specialresponsive > tbody > tr > td,
.table-specialresponsive > tfoot > tr > td {
border: none;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
}
.table-specialresponsive > tbody > tr > td:before,
.table-specialresponsive > tfoot > tr > td:before {
position: absolute;
left: 6px;
width: 50%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
content: attr(data-title);
}
}Responsive table is applicable for screen resolution less then 768 pixels .. and maybe interesting is last line content: attr(data-title) which specify the content which will be apply before every cell.
That's it