Using Jquery you can tell any table on a webpage to show a table in a easy to read responsive format using Jquery and a simple CSS Media call.
Step 1. Make sure you call Jquery
Example: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Step 2. Make sure all table headers are called as TH not TD.
Step 3. Insert the Following Javascript:
<script type="text/javascript">
$(function() {
$('table').each(function() {
var head_col_count = $(this).find('th').size();
for ( i=0; i <= head_col_count; i++ ) {
var head_col_label = $(this).find('th:nth-child('+ i +')').text();
$(this).find('tr td:nth-child('+ i +')').attr('data-th',head_col_label );
}
})
});
</script>
Step 4. Add Media CSS:
<style>
table {
width:100%;
border-collapse:collapse;
}
@media only screen and (max-width:550px) {
table, thead, tbody, th, td, tr {display: block;}
th {display:none;}
tr:first-child {
border-top:none;
margin-bottom:0;
}
tr {
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
margin-bottom:5px;
}
td {
border: none;
border-bottom: 1px solid #ccc;
position: relative !important;
padding-left: 50% !important;
white-space: normal;
text-align:right !important;
}
td:before {
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
td:before {
content: attr(data-th)":";
position:absolute;
left:5px;
}
}
</style>
This script will work even if there is multiple tables on the same page. I also added a JFiddle Page so you can test it yourself:
http://jsfiddle.net/brookh/wp1zhLe2/2/