jQuery Datatables responsive example
HTML
<script src="https://nightly.datatables.net/js/jquery.dataTables.min.js?123"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script type='text/javascript' src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js"></script>
<table border="0" class="dataTable cell-border compact hover stripe" id="myid">
<thead>
<tr>
<th class="sortable-text " id="col1">Col1</th>
<th class="sortable-text " id="col2">Col2</th>
<th class="sortable-text " id="col3">Column 3333</th>
<th class="sortable-numeric " id="col6">QQQ</th>
<th class="sortable-numeric">All123456</th>
<th class="sortable-numeric">Testt6 Testt</th>
<th class="sortable-numeric">Past 123 123456</th>
<th class="sortable-numeric">12345678 Sunday</th>
<th class="sortable-numeric">12345678 vs SS Sunday</th>
<th class="sortable-numeric">$ 123456</th>
<th class="sortable-numeric">$ vs SS Sunday</th>
<th class="sortable-numeric">12345678 1/10/2016</th>
<th class="sortable-numeric">12345678 vs SS 1/10/2016</th>
<th class="sortable-numeric">$ 1/10/2016</th>
<th class="sortable-numeric">$ vs SS 1/10/2016</th>
<th class="sortable-numeric">12345678 1/17/2016</th>
<th class="sortable-numeric">12345678 vs SS 1/17/2016</th>
<th class="sortable-numeric">$ 1/17/2016</th>
<th class="sortable-numeric">$ vs SS 1/17/2016</th>
<th class="sortable-numeric">12345678 1/24/2016</th>
<th class="sortable-numeric">12345678 vs SS 1/24/2016</th>
<th class="sortable-numeric">$ 1/24/2016</th>
<th class="sortable-numeric">$ vs SS 1/24/2016</th>
<th class="sortable-numeric">12345678 1/31/2016</th>
<th class="sortable-numeric">12345678 vs SS 1/31/2016</th>
<th class="sortable-numeric">$ 1/31/2016</th>
<th class="sortable-numeric">$ vs SS 1/31/2016</th>
<th class="sortable-numeric">12345678...
CSS
td, th { border: 1px solid black; }
JavaScript
$(document).ready(function() {
$('#myid').DataTable({
'dom': 't',
'paging': false,
'scrollCollapse': true,
'scrollX': true,
'orderClasses': false,
'bSort': true,
'autoWidth': false,
'scrollY': '200',
'aaSorting': [],
fixedColumns: {
leftColumns: 3
}
});
});