Make a HTML Table Responsive with a simple script.

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/