Bootstrap responsive table

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