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
Ak pracujeme s CSS knižnicou bootstrap, skôr či neskôr sa dostaneme do situácie, kedy potrebujeme nastaviť CSS štýl nejakému komponentu/tagu … podľa rôznej veľkosti obrazovky prehliadača. Slúži na to kľúčové slovo @media. Bootstrap rozlišuje 4 základné veľkosti (nájdeme ich aj vo vnútri knižnice):
.container {
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Základné veľkosti podľa bootstrap-u sú teda štyri:
- veľkosť do 768 pixelov
- veľkosť od 768 do 992 px
- veľkosť od 992 do 1200 px
- veľkosť nad 1200 pixelov
Toto nie je žiadne tajomstvo. No týmto blog postom by som chcel upozorniť na jednu drobnosť. A to použitie reverzného princípu pomocou @media (max-width: x). Definovanie štýlu nie od minimálnej šírky ale do maximálnej šírky. Tu treba dať pozor na jednu vec a tou je jeden pixel. Ak definujeme štýl od minimálnej šírky pomocou min-width:x tak k nemu opačná definícia pomocou max-width je max-width:x-1. Pre úvodný kus kódu by to bolo nasledovne:
@media (max-width: 767px) {
/* Custom definitions ...*/
}
@media (max-width: 991px) {
/* Custom definitions ...*/
}
@media (max-width: 1199px) {
/* Custom definitions ...*/
}
A ešte jedna poznámka na záver:
- @media (max-width: 767px) platí pre šírku od 0 do 767 pixelov
- @media (min-width: 768px) platí pre šírku od 768 pixelov a viac