JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdn.datatables.net/v/bs/dt-1.10.15/fc-3.2.2/fh-3.1.2/datatables.min.js"></script>
<span class="mainReportContainer"><div id="id1" class="reportContainer" style="padding-right: 15px; padding-left: 15px;"><div id="id2"></div><table class="table table-hover table-bordered table-condensed table-striped form-inline" id="ajaxDpWellDressedReport415144704"><thead><tr><th class=""><a onclick="$.ajax({&quot;dataType&quot;:&quot;script&quot;,&quot;url&quot;:&quot;/reps&quot;,&quot;data&quot;:[&quot;_s=jEYavzjKJduoFWNt&quot;,&quot;_k=rPXgwnrODaLwFb2i&quot;,&quot;4&quot;].join(&quot;&amp;&quot;)})" href="javascript:void(0)">S</a><label><input onclick="$.ajax({&quot;url&quot;:&quot;/reps&quot;,&quot;data&quot;:[&quot;_s=jEYavzjKJduoFWNt&quot;,&quot;_k=rPXgwnrODaLwFb2i&quot;,&quot;5&quot;,$(this).next(&quot;input:hidden&quot;).addBack().serialize()].join(&quot;&amp;&quot;),&quot;dataType&quot;:&quot;script&quot;})" name="6" type="checkbox" class="checkbox"><input name="7" type="hidden" class="hidden"></label></th><th class=" required"><div class="closeColumn"><a style="float:right;" onclick="$.ajax({&quot;dataType&quot;:&quot;script&quot;,&quot;url&quot;:&quot;/reps&quot;,&quot;data&quot;:[&quot;_s=jEYavzjKJduoFWNt&quot;,&quot;_k=rPXgwnrODaLwFb2i&quot;,&quot;8&quot;].join(&quot;&amp;&quot;)})" href="javascript:void(0)"><span class="glyphicon glyphicon-remove"></span></a></div><a onclick="$.ajax({&quot;dataType&quot;:&quot;script&quot;,&quot;url&quot;:&quot;/reps&quot;,&quot;data&quot;:[&quot;_s=jEYavzjKJduoFWNt&quot;,&quot;_k=rPXgwnrODaLwFb2i&quot;,&quot;9&quot;].join(&quot;&amp;&quot;)})" href="javascript:void(0)">Account</a><form accept-charset="utf-8" method="post" action="/reps?_s=jEYavzjKJduoFWNt&amp;_k=rPXgwnrODaLwFb2i"...

CSS

/********************* Bootstrap TABLES customizations *********************/ 

#tableopts { padding: 8px 8px; background: #333; color: #fff; border-top-right-radius: 8px; border-top-left-radius: 8px; margin-top: 0px }

.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background: white; }
.table-striped tbody > tr:nth-child(even) > td, .table-striped tbody > tr:nth-child(even) > th { background: #DCDCDC; }
.table-striped>tbody>tr.selectedRow:nth-child(odd)>td, .table-striped>tbody>tr.selectedRow:nth-child(even)>td { background-color: #819bbf; color: black; }

.table-bordered { border-right-color: black; border-left-color: black; }
.table-bordered > tbody > tr > td { border: 1px solid #bbb; }


.table-hover tbody tr:hover th a { background-color: gray; text-shadow: none; color: #191970; }

.table-hover tbody tr:hover td { background-color: gray; color: white!important; }
.table-hover tbody tr:hover td a { text-shadow: none; color: #fff; }
.table-hover tbody tr:hover td a span.glyphicon { text-shadow: none; }
.table-hover tbody tr:hover td a:hover { text-shadow: none; color: #a5bfc2; }

/* This is a hack for rows were re render a dropdown list, list the lookup chooser for tables/charts...
the dropdown triggers the hover of the row and we cannot apply the original colors as they are not visible with 
the dropdown so we must adapt colors*/
.table-hover tbody tr:hover td ul li { color: white; }
.table-hover tbody tr td ul li a { text-shadow: none; color: #7b8a8b; }
.table-hover tbody tr:hover td ul li a { text-shadow: none; color: #7b8a8b; }
.table-hover tbody tr:hover td ul li.active > a { text-shadow: none; color: white; }
.table-hover tbody tr:hover td ul li:hover { background-color: #2c3e50; color: white; }
.table-hover tbody tr:hover td ul li a:hover { color: #a5bfc2; }



.table thead > tr > th, .table thead > tr > th > a { background: #222; color: white; font-weight: normal;  text-align: center !important;...

JavaScript

$(document).ready(function() {
 	var oTable =  $('#ajaxDpWellDressedReport415144704').DataTable({
    scrollY: 300,
    scrollX: "true",
    scrollCollapse: true,
    paging: false,
  });


	
			new $.fn.dataTable.FixedColumns( oTable, {
        leftColumns: 1,
	rightColumns: 1
    } );


});