Bootstrap responsive table

3. May 2015 Anton Urbaník Web Technologies (0)

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 :

Bootstrap table with standard pc resolution

to something like this:

Bootstrap table with mobile resolution

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

Boostrap - @media(min-width vs. max-width)

13. January 2015 Anton Urbaník Web Technologies (0)

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:

  1. veľkosť do 768 pixelov
  2. veľkosť od 768 do 992 px
  3. veľkosť od 992 do 1200 px
  4. 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