JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<script src="https://cdn.rawgit.com/mkoryak/floatThead/master/dist/jquery.floatThead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#copy" aria-controls="copy" role="tab" data-toggle="tab">Copy Data</a></li>
    <li><a href="#security" aria-controls="security" role="tab" data-toggle="tab">Security</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="copy" style="height: 300px; overflow:auto">
                                    
<table id="copyTbl" class="table table-striped table-hover table-responsive table-condensed sticky-header copy">
<thead>
<tr>
    <th class="text-center" style="background: #ffffff;">Town</th>
    <th class="text-center" style="background: #ffffff;">Postal Code</th>
    <th class="text-center" style="background: #ffffff;">ID</th>
    <th class="text-center" style="background: #ffffff;">Labour Rates</th>
    <th class="text-center" style="background: #ffffff;">Travel Rates</th>
    <th class="text-center" style="background: #ffffff;">Discount Rates</th>
    <th class="text-center" style="background: #ffffff;">Misc Dealer Info</th>
    <th class="text-center" style="background: #ffffff;">Consumables Costs</th>
    <th class="text-center" style="background: #ffffff;">Parts Prices</th>
    <th class="text-center" style="background: #ffffff;">Labour Overrides</th>
    <th class="text-center" style="background: #ffffff;">Tax Rates</th>
    <th class="text-center" style="background: #ffffff;">Reject Reasons</th>
    <th class="text-center" style="background: #ffffff;"></th>
</tr>

</thead>
<tbody>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td class="text-center"...

JavaScript

$(document).ready(function() {
    $('.sticky-header').floatThead({
       scrollContainer: ($t)=> $t.parent(),
       position: 'fixed'});
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function(){
    $('.sticky-header:visible').floatThead('reflow');
});