JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.js"></script>
<div id="id1056" class="reportContainer"><div id="id1057"></div><table class="table table-hover table-bordered table-condensed table-striped form-inline" id="ajaxDpWellDressedReport184922624"><thead><tr><th class=""><a onclick="$.ajax({&quot;dataType&quot;:&quot;script&quot;,&quot;url&quot;:&quot;/reps&quot;,&quot;data&quot;:[&quot;_s=QmtlGw4Hjqc8TSLy&quot;,&quot;_k=c_aisIb2fkfcrbjq&quot;,&quot;1059&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=QmtlGw4Hjqc8TSLy&quot;,&quot;_k=c_aisIb2fkfcrbjq&quot;,&quot;1060&quot;,$(this).next(&quot;input:hidden&quot;).addBack().serialize()].join(&quot;&amp;&quot;),&quot;dataType&quot;:&quot;script&quot;})" name="1061" type="checkbox" class="checkbox"><input name="1062" 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=QmtlGw4Hjqc8TSLy&quot;,&quot;_k=c_aisIb2fkfcrbjq&quot;,&quot;1063&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=QmtlGw4Hjqc8TSLy&quot;,&quot;_k=c_aisIb2fkfcrbjq&quot;,&quot;1064&quot;].join(&quot;&amp;&quot;)})" href="javascript:void(0)">Account</a><form accept-charset="utf-8" method="post" action="/reps?_s=QmtlGw4Hjqc8TSLy&amp;_k=c_aisIb2fkfcrbjq" class="reportHeaderFilterContainer reportHeaderFilterStringContainer"><input class="form-control input-xs text" onkeypress="if((window.event ? window.event.keyCode : event.which) ==...

CSS

* {
  font-family: "Lucida Sans Typewriter", monospace;
}

h1 {
  font-size: 14px;
  text-align: left;
  color: #000000;
}

h2 {
  font-size: 11px;
  text-align: left;
  color: #000000;
}

a:link {
  color: #000000;
  text-decoration: none;
}

a:active {
  color: #000000;
  text-decoration: none;
}

a:visited {
  color: #0000ff;
  text-decoration: none;
}

a:hover {
  color: #000000;
  text-decoration: none;
}

table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

table table {
  margin: 0;
  padding: 0;
  border-style: none;
  height: 100%;
  width: 100%;
}


/* taking this style out will make the problem go away, but these settings are needed in our application */

td {
  font-size: 11px;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0;
  padding-bottom: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #c7c4c1;
  height: 9px;
  // partially successful
}


/* dupe of td since I hacked th in the header rows */

th {
  font-size: 11px;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0;
  padding-bottom: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #c7c4c1;
  height: 9px;
  // partially successful
}

td td {
  border-style: none;
}

.c {
  margin: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #c7c4c1;
  padding: 0;
}


/* Masks an alignment artifact in which a second scrollbar appears in the locked columns area. */

.DTFC_LeftBodyLiner {
  overflow-x: hidden;
}

JavaScript

$(document).ready(function() {
  $('#ajaxDpWellDressedReport184922624').DataTable({
    scrollY: 300,
    scrollX: "100%",
    scrollCollapse: true,
    paging: false,
  });
});