Responsive table
// RESPOSIVE TABLES
// counts total number of td in a head so that we can can use it for label extraction
var count =0;
$('body table').each(function() {
count++;
console.log('table: '+count);
var head_col_count = $(this).find('thead th').size();
console.log('head_col_count: '+head_col_count);
for ( i=0; i <= head_col_count; i++ ) {
// head column label extraction
var head_col_label = $(this).find('thead th:nth-child('+ i +')').text();
console.log('head_col_label: '+head_col_label);
$(this).find('tbody tr th:nth-child('+ i +')').replaceWith(
function(){
return $('<div class="column" data-label="'+ head_col_label +'">').append($(this).contents());
}
);
$(this).find('tbody tr td:nth-child('+ i +')').replaceWith(
function(){
return $('<div class="column" data-label="'+ head_col_label +'">').append($(this).contents());
}
);
}
// replaces table with <div class="table">
$(this).replaceWith(
function(){
return $('<div class="table'+count+'">').append($(this).contents());
}
);
//replaces tr with <div class="row">
$('.table'+count).find('thead tr').replaceWith(
function(){
return $('<div class="column">').append($(this).contents());
}
);
//replaces tr with <div class="row">
$('.table'+count).find('thead th').replaceWith(
function(){
return $('<div class="column">').append($(this).contents());
}
);
// replaces thead with <div class="table-head">
$('.table'+count).find('thead').replaceWith(
function(){
return $('<div class="table-head">').append($(this).contents());
}
);
//replaces tr with <div class="row">
$('.table'+count).find('tbody tr').replaceWith(
function(){
return $('<div class="row">').append($(this).contents());
}
);
// replaces th with <div class="column">
$('.table'+count).find('tbody th').replaceWith(
function(){
return $('<div class="column">').append($(this).contents());
}
);
// replaces th with <div class="column">
$('.table'+count).find('tbody td').replaceWith(
function(){
return $('<div class="column">').append($(this).contents());
}
);
// replaces tbody with <div class="table-head">
$('.table'+count).find('tbody').replaceWith(
function(){
return $('<div class="table-body">').append($(this).contents());
}
);
});
/* Responsive table */
@media all and (max-width: 640px) {
.table,
.row,
.column,
.column:before {
display: inline-block;
/* Converts a table, table row, table column and table column:before into a block element */
}
.table,
.row .column:last-child {
border-bottom: none;
}
.table-head {
position: absolute;
/* Hides table head but not using display none */
top: -1000em;
left: -1000em;
}
.row {
border: 1px solid #eeeeee;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
margin: 20px 0;
}
.row .column:nth-child(1) {
/* first column of the row */
border-left: none;
}
.row .column:last-child {
/* last column of the row */
border-right: none;
}
.row:last-child .column,
.column {
/* Column in the last row and column */
border-bottom: 1px solid #eeeeee;
width: 100%;
}
.column:before {
/* prints the value of data-label attribute before the column data */
font-weight: bold;
padding-right: 20px;
content: " " attr(data-label) ": ";
/* call the attribute value of data-label and adds a string // */
}
}