<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">
Responsive Tables Elite
</h1>
</div>
<div class="rte">
<table class="col-md-12 table-bordered table-striped table-condensed rte">
<thead class="cf">
<tr>
<th>Code</th>
<th>Company</th>
<th >Price</th>
<th >Change</th>
<th >Change %</th>
<th >Open</th>
<th >High</th>
<th >Low</th>
<th >Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAC</td>
<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td>$1.38</td>
<td>-0.01</td>
<td>-0.36%</td>
<td>$1.39</td>
<td>$1.39</td>
<td>$1.38</td>
<td>9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>ARDENT LEISURE GROUP</td>
<td>$1.15</td>
<td>+0.02</td>
<td>1.32%</td>
<td>$1.14</td>
<td>$1.15</td>
<td>$1.13</td>
<td>56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>AUSENCO LIMITED</td>
<td>$4.00</td>
<td>-0.04</td>
<td>-0.99%</td>
<td>$4.01</td>
<td>$4.05</td>
<td>$4.00</td>
<td>90,641</td>
</tr>
<tr>
<td>ABC</td>
<td>ADELAIDE BRIGHTON LIMITED</td>
<td>$3.00</td>
<td>+0.06</td>
<td>2.04%</td>
<td>$2.98</td>
<td>$3.00</td>
<td>$2.96</td>
<td>862,518</td>
</tr>
<tr>
<td>ABP</td>
<td>ABACUS PROPERTY GROUP</td>
<td>$1.91</td>
<td>0.00</td>
<td>0.00%</td>
<td>$1.92</td>
<td>$1.93</td>
<td>$1.90</td>
<td>595,701</td>
</tr>
<tr>
<td>ABY</td>
<td>ADITYA BIRLA MINERALS LIMITED</td>
<td>$0.77</td>
<td>+0.02</td>
<td>2.00%</td>
<td>$0.76</td>
<td>$0.77</td>
<td>$0.76</td>
<td>54,567</td>
</tr>
<tr>
<td>ACR</td>
<td>ACRUX LIMITED</td>
<td>$3.71</td>
<td>+0.01</td>
<td>0.14%</td>
<td>$3.70</td>
<td>$3.72</td>
<td>$3.68</td>
<td>191,373</td>
</tr>
<tr>
<td>ADU</td>
<td>ADAMUS RESOURCES LIMITED</td>
<td>$0.72</td>
<td>0.00</td>
<td>0.00%</td>
<td>$0.73</td>
<td>$0.74</td>
<td>$0.72</td>
<td>8,602,291</td>
</tr>
<tr>
<td>AGG</td>
<td>ANGLOGOLD ASHANTI LIMITED</td>
<td>$7.81</td>
<td>-0.22</td>
<td>-2.74%</td>
<td>$7.82</td>
<td>$7.82</td>
<td>$7.81</td>
<td>148</td>
</tr>
<tr>
<td>AGK</td>
<td>AGL ENERGY LIMITED</td>
<td>$13.82</td>
<td>+0.02</td>
<td>0.14%</td>
<td>$13.83</td>
<td>$13.83</td>
<td>$13.67</td>
<td>846,403</td>
</tr>
<tr>
<td>AGO</td>
<td>ATLAS IRON LIMITED</td>
<td>$3.17</td>
<td>-0.02</td>
<td>-0.47%</td>
<td>$3.11</td>
<td>$3.22</td>
<td>$3.10</td>
<td>5,416,303</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-center"><br>
Based On "No more tables (responsive table)" by sergiopinnaprato
</div>
</div>
/* Responsive Tables Elite */
@media only screen and (max-width: 767px) {
/* Force table to not be like tables anymore */
.rte table,
.rte thead,
.rte tbody,
.rte th,
.rte td,
.rte tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.rte thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.rte tr { border: 1px solid #ccc; }
.rte td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50% !important;
white-space: normal;
}
.rte td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
}
/*
Label the data
*/
.rte td:before { content: attr(data-title); }
}
(function ($) {
$.fn.rte = function () {
var that = this;
this.find('th').each(function (index) {
index++;
that.find('tr td:nth-child(' + index + ')').attr('data-title', that.find('th:nth-child(' + index + ')').text());
});
}
})(jQuery);
$('.rte').rte();
