JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9,fc-3.1.0,fh-3.0.0,rr-1.0.0,se-1.0.1/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9,fc-3.1.0,fh-3.0.0,rr-1.0.0,se-1.0.1/datatables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body>
<table id="test_Table" height="100%" class="display" cellspacing="0" width="50%" >
<thead>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
<td>KKK</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>
test
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">2</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>666</td>
<td> 777</td>
<td>888</td>
<td>999</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>
test
</td>
<td>
test
</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>666</td>
<td> 777</td>
<td>888</td>
<td>999</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>
test
</td>
<td>
test
</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>666</td>
<td> 777</td>
<td>888</td>
<td>999</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>
test
</td>
<td>
test
</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>666</td>
<td> 777</td>
<td>888</td>
<td>999</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>
test
</td>
<td>
test
</td>
<td>333</td>
<td>444</td>
...
JavaScript
$(document).ready(function() {
$('#test_Table').DataTable( {
"scrollY": "200px",
"scrollCollapse": false,
"paging": false
} );
} );