Mobile Responsive HTML Tables
Easy peasy mobile responsive html tables. This uses Mootools, but it would be easy to convert it. The idea is to take the text in the headers of a table and add it as data attribute to the table cells. Everything else is done with CSS. I use Bootstrap, but it will work without.
The javascript
var ResponsiveTable = new Class({ Implements: [Class.Occlude, Options, Events], options: { minWidth: 700, onShow: function(element, tip) {}, onHide: function(element, tip) {} }, initialize: function (element, options) { if (this.occlude('ResponsiveTable', element)) { return this.occluded; } this.setOptions(options); this.table = element; this.getTableHeaders(); this.table.addClass('table-responsive'); }, getTableHeaders: function () { var text , th = this.table.getElements('th') , count = th.length; th.each( function ( header, i) { text = header.get('text').trim() || header.getAttribute('title'); if ( text ) this.table.getElements('td:nth-child(' + count + 'n+' + ( i + 1 ) + ')') .setProperty('data-before', text); }, this); }, toElement: function () { return this.table; } });
The CSS:
@media (max-width:768px) { .table-responsive { border: none; } .table-responsive tr, .table-responsive td, .table-responsive th { display: block; } .table-responsive>thead, .table-responsive>thead>tr { height: 0; } .table-responsive>thead>tr>th { position: absolute; top: -9999px; left: -9999px; } .table-responsive>tbody>tr { border: 1px solid #aaa; } .table-responsive>tbody>tr>td { border: none; border-top: 1px solid #eee; position: relative; padding-left: 40%; clear: left; } .table-responsive>tbody>tr>td { text-align: left; width: 100%; } .table-responsive>tbody>tr>td:before { text-align: right; } .table-responsive td[data-before]:empty { min-height: 30px; } .table-responsive>tbody>tr>td:before { position: absolute; top: 6px; left: 6px; width: 35%; padding-right: 10px; white-space: nowrap; content: attr(data-before) ':'; color: #333; font-size: 12px; } .table-responsive>tbody>tr>td[data-icons] { float: left; padding-left: 0; clear: none; width: auto; } .table-responsive>tbody>tr>td[data-icons]:before { content: ''; } .table-striped.table-responsive>tbody>tr:nth-child(odd)>td, .table-striped.table-responsive>tbody>tr:nth-child(odd) { background-color: #f9fdfb; } .table-striped.table-responsive>tbody>tr:nth-child(even)>td, .table-striped.table-responsive>tbody>tr:nth-child(even) { background-color: #FFF; } .table-striped.table-responsive>tbody>tr.table-tr-selected:nth-child(even)>td, .table-striped.table-responsive>tbody>tr.table-tr-selected:nth-child(even) { background-color: #e9e9e9; } }
