Tables responsive

Easy customizable, framework agnostic, responsive table patterns written with SASS and easy to use with Twitter Bootstrap

Basic one - revert whole table and add scroll for table body

Pretty simple to use, just add .table-revert class to table. No need to use any additional containers, just switching display mode for <thead>, <tbody> and <tr>

Column title	column 3	column 4	column 5	column 6	column 7	column 8
Lorem ipsum dolor sit	8762	765	7652	3654	1761	963
Donec fringilla fringilla metus	8762	765	7652	3654	1761	963
Cum sociis natoque	8762	765	7652	3654	1761	963
Nullam et euismod quam	8762	765	7652	3654	1761	963
Duis varius mauris vitae lorem	8762	765	7652	3654	1761	963
Duis interdum dui a orci euismod ultricies	8762	765	7652	3654	1761	963

<table class="table table-bordered table-responsive table-revert">
     ...
<table>

Next one - fix first column and add scroll

More complicated and bit ugly - two additional wrappers for table, if parent element haven't position: relative, and one in another case. But if needed to fix first column as it is and scrolls all others - there is no other way

Column title	column 1	column 2	column 3	column 4	column 5	column 6	column 7	column 8
Nulla quis feugiat tellus	1234	765	765	167654	54	43	65654	32
Mauris sit amet leo non	1234	765	765	167654	5	34	654	121543
Pellentesque habitant morbi	1234	765	765	167654	65	456	654645	121543

<div class="table-responsive-wrapper">
    <div class="table-responsive-scroll">
        <table class="table-responsive fix-col">
            …
        </table>
    </div>
</div>

Another simple option - just hide columns one by one for different devices

Default bootstrap classes like .hidden-tablet or .hidden-phone or .hidden-desktop are quite usefull for that.

Column title	Hidden for tablets	Hidden for phone	column 3	column 4	column 5	column 6
Fusce quam orci	1234	765	765	167654	121543	121543
Mauris porta enim risus	1234	765	765	167654	121543	121543
Vivamus ut porta risus	1234	765	765	167654	121543	121543

    <th class="hidden-tablet">Hidden for tablets</th>
    <th class="hidden-phone">Hidden for phone</th>

A little bit javascript - hide few columns, and let user choose what he wants to see

To use it, class .hidden-col should be added for all unnecessary columns. And .toggle-col class with data attribute data-target="#toggle-cols" to set-up dropdown container, for a table

Column title	column 0	hide this column	column 1	column 2	column 3	and this one two	column 5	column 6
Fixed first column	1234	9	1234	765	765	167654	121543	121543
Fixed first column	1234	9	1234	765	765	167654	121543	121543
Fixed first column	1234	9	1234	765	765	167654	121543	121543
Fixed first column	1234	9	1234	765	765	167654	121543	121543

<table class="table table-bordered table-responsive toggle-col"
    data-target="#toggle-cols" data-tables="responsive-table">
    …
</table>

Drilldown support, to create views with "nested rows"

To set up add .drilldown class and data-tables="responsive-table" attribute to a table

Column title	column 1	column 2	column 3	column 4	column 5	column 6
Fixed first column	1234	765	765	167654	121543	121543
Fixed first column	9	1234	765	765	167654	121543	121543
Fixed first column	9	1234	765	765	167654	121543	121543
Fixed first column	9	1234	765	765	167654	121543	121543

<table class="table table-bordered table-responsive drilldown"
    data-tables="responsive-table">
  …
</table>

Everything is pretty stackable, so it's possible to create such a "monster":

Column title	auto-hide column	column 1	column 2	column 3	column 4	column 5	column 6	column 7	column 8
Fixed first column	9	1234	765	765	167654	121543	121543	121543	121543
Fixed first column	9	1234	765	765	167654	121543	121543	121543	121543
Fixed first column	9	1234	765	765	167654	121543	121543	121543	121543
Fixed first column	9	1234	765	765	167654	121543	121543	121543	121543

<table class="table table-bordered table-responsive fix-col drilldown toggle-col"
       data-target="#toggle-cols-monster" data-tables="extables"e>
  …
</table>