JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<script src="http://datatables.net/release-datatables/extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://datatables.net/release-datatables/extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">
  
<div class="row clearfix">
	<table id="example" class="table table-striped table-bordered border-collapse"
		cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>First name</th>
				<th>Last name</th>
				<th>Position</th>
				<th>Office</th>
				<th>Age</th>
				<th>Start date</th>
				<th>Salary</th>
				<th>Extn.</th>
				<th>E-mail</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td>1Tige111111111111111111111111111111111111</td>
				<td>Nixon</td>
				<td>System Architect</td>
				<td>Edinburgh</td>
				<td>61</td>
				<td>2011/04/25</td>
				<td>$320,800</td>
				<td>5421</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td>11111111111111111111111111111111111111111122</td>
				<td>Winters</td>
				<td>Accountant</td>
				<td>Tokyo</td>
				<td>63</td>
				<td>2011/07/25</td>
				<td>$170,750</td>
				<td>8422</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td>Ashton</td>
				<td>Cox</td>
				<td>Junior Technical Author</td>
				<td>San Francisco</td>
				<td>66</td>
				<td>2009/01/12</td>
				<td>$86,000</td>
				<td>1562</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td>Cedric</td>
				<td>Kelly</td>
				<td>Senior Javascript...

CSS

body { font-size: 140%; }
 
    /* Ensure that the demo table scrolls */
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }

JavaScript

var table = $('#example').DataTable({
		scrollY : "300px",
		scrollX : true,
		scrollCollapse : true,
		paging : false,
		"columns" : [ {
			"width" : "20px"
		}, {
			"width" : "20px"
		}, {
			"width" : "10%"
		}, {
			"width" : "10%"
		}, {
			"width" : "10%"
		}, {
			"width" : "10%"
		}, {
			"width" : "10%"
		}, {
			"width" : "10%"
		}, null ]
	});
	new $.fn.dataTable.FixedColumns(table ,{
        leftColumns: 2
    });