JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="mainTableWrapper">
<table id="mainTable" class="table table-striped table-bordered table-hover table-condensed dataTable mainTable" style="width:100%;">
<thead class="okToWrap">
<tr>
<th></th>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
<th>
Column6
</th>
<th>
Column7
</th>
<th>
Column8
</th>
<th>
Column9
</th>
<th>
Column10
</th>
<th>
Column11
</th>
<th>
Column12
</th>
<th>
Column13
</th>
<th>
Column14
</th>
<th>
Column15
</th>
<th>
Column16
</th>
<th>
Column17
</th>
<th class="noExcessPadding">Options</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td class="centerColumnData">
<a href="#">
<span class="linkIcon glyphicon glyphicon-new-window"></span>
</a>
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
...
JavaScript
var mainTable = $("#mainTable").DataTable({
"scrollY": "500px",
"scrollX": true,
//"scrollXInner": "100%",
"scrollCollapse": true,
//"autoWidth": false,
"paging": true,
"iDisplayLength": 25,
"dom": 't'
});