JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.7/jquery.slimscroll.js"></script>
<table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-show-toggle="true" data-show-columns="true" data-pagination="true" data-show-filter="true" data-filter-control="true" data-height="300">
<thead>
<tr>
<th data-field="CustomerName">CustomerN</th>
<th data-field="ProjectName">ProjectN</th>
<th data-field="ProjectType">ProjectT</th>
<th data-field="ProjectDetails">ProjectD</th>
<th data-field="ProjectLocation">ProjectL</th>
<th data-field="ProjectTiming">ProjectT</th>
<th data-field="ProjectTeam">ProjectT</th>
<th data-field="ProjectStatus">ProjectS</th>
<th data-field="ProjectProgress">ProjectP</th>
</tr>
</thead>
<tbody>
<tr>
<td>GE Capital Corporation</td>
<td>Services SOW #1</td>
<td>Project | T&M</td>
<td>"Inani fabulas nominavi sea no.\n"+
"Ad quodsi luptatum expetenda eum, sed ludus dicam\n"+
"nominati te, reque causae prompta eos ex. Putent \n"+
"torquatos mei ei. Te verear offendit per. Vix eu erant\n"+
"doctus delenit, et copiosae indoctum accommodare eum.\n"+
"Errem tritani in qui, te vis legere saperet corpora.\n"+
"Eu mei nobis pertinacia, in has putent virtute...
JavaScript
$('#mainTable').bootstrapTable({
});
$('.fixed-table-body').slimScroll({});