jQuery Datatables responsive example
HTML
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="example" cellpadding="0" cellspacing="0" border="0" class="table table-bordered" width="100%">
<thead>
<tr id='tablaVacacionesCalendarHeader'>
<th nowrap='nowrap' rowspan='3'></th>
<th nowrap='nowrap' rowspan='3'>Type</th>
<th nowrap='nowrap' rowspan='3'>V</th>
<th nowrap='nowrap' rowspan='3'>L</th>
<th nowrap='nowrap' rowspan='3'>BI</th>
<th nowrap='nowrap' rowspan='3'>DG</th>
<th nowrap='nowrap' colspan='30'>May 2017</th>
</tr>
<tr id='tablaVacacionesCalendarDayOfWeek'>
<th>Tu</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>Sa</th>
<th>Su</th>
<th>M</th>
<th>Tu</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>Sa</th>
<th>Su</th>
<th>M</th>
<th>Tu</th>
<th>Tu</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>Sa</th>
<th>Su</th>
<th>M</th>
<th>Tu</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>Sa</th>
<th>Su</th>
<th>M</th>
<th>Tu</th>
</tr>
<tr id='tablaVacacionesCalendarDayOfMonth'>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
...
JavaScript
$(document).ready(function() {
$('#example').DataTable( {
scrollY: "100px",
scrollX: true,
scrollCollapse: true,
paging: false,
sortable: false,
ordering: false,
searching:false,
info: false,
fixedColumns: {
leftColumns: 6
}
} );
} );