Small Screen Data-table View
****************************Jquery***********************************
**********************CSS*******************************************
$(document).ready(function () {
var headertext = [],
headers = document.querySelectorAll("#customDataTable th"),
tablerows = document.querySelectorAll("#customDataTable th"),
tablebody = document.querySelector("#customDataTable tbody");
for (var i = 0; i < headers.length; i++) {
var current = headers[i];
headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[j]);
}
}
});
**********************CSS*******************************************
@media screen and (max-width: 640px) {
table#customDataTable caption {
background-image: none;
}
table#customDataTable thead {
display: none;
}
table#customDataTable tbody td {
display: block;
padding: .6rem;
}
table#customDataTable tbody tr td:first-child {
background: #666;
color: #fff;
}
table#customDataTable tbody tr td:first-child a {
color: #fff;
}
table#customDataTable tbody tr td:first-child:before {
color: rgb(225,181,71);
}
table#customDataTable tbody td:before {
content: attr(data-th);
font-weight: bold;
display: inline-block;
width: 10rem;
}
table#customDataTable tr th:last-child, table#customDataTable tr td:last-child {
max-width: 100% !important;
min-width: 100px !important;
width: 100% !important;
}
}
Multipal Table
function Call
smallTable("Table ID Name");
function smallTable(id) {
var headertext = [],
headers = document.querySelectorAll("#" + id +" th"),
tablerows = document.querySelectorAll("#" + id +" th"),
tablebody = document.querySelector("#" + id +" tbody");
for (var i = 0; i < headers.length; i++) {
var current = headers[i];
headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[j]);
}
}
}
Comments
Post a Comment