JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<div class="table-responsive">

            <div class='table-responsive'>
<table id='SearchTable' class='table table-bordered table-striped table-hover table blue'runat='server'>
<thead>
<tr>
<th class='ReportID'>Report ID <i class='icon-filter'></i></th>
<th class='Status'>Status <i class='icon-filter'></i></th>
<th class='RequestNumber'>Request Number <i class='icon-filter'></i></th>
<th class='SubmitDate'>Submit Date <i class='icon-filter'></i></th>
<th class='SampleReceiveDate'>Sample Receive Date <i class='icon-filter'></i></th>
<th class='InspectionDate'>Inspection Date <i class='icon-filter'></i></th>
<th class='ReportNumber'>Report Number <i class='icon-filter'></i></th>
<th class='ReportIssueDate'>Report Issue Date <i class='icon-filter'></i></th>
<th class='ServiceProvider'>Service Provider <i class='icon-filter'></i></th>
<th class='LabLocationCode'>Lab Location Code <i class='icon-filter'></i></th>
<th class='RequestingComany'>Requesting Comany <i class='icon-filter'></i></th>
<th class='Applicant'>Applicant <i class='icon-filter'></i></th>
<th class='SupplierName'>Supplier Name <i class='icon-filter'></i></th>
<th class='Manufacturer\FactoryName'>Manufacturer \ Factory Name <i class='icon-filter'></i></th>
<th class='ItemNumber'>Item Number <i class='icon-filter'></i></th>
<th class='Style\ModelNumber'>Style \ Model Number <i class='icon-filter'></i></th>
<th class='PONumber'>PO Number <i class='icon-filter'></i></th>
<th class='CountryofOrigin'>Country of Origin <i class='icon-filter'></i></th>
<th class='TestStage'>Test Stage <i class='icon-filter'></i></th>
<th class='OverallReportResult'>Overall Report Result <i class='icon-filter'></i></th>
</tr>
</thead>
<tbody>
<tr>
<td class='ReportManager'><a href='../Request/TestReportUpload.aspx?requestid=62&type=lab'><span style='font-size: 20px;'><i class='fa fa-file-o'></i></span></a></td>
<td class='Status'>SUBMITTED</td>
<td class='FormNumber'><a...

CSS

.blue th {
    color:white !important;
    background-color: #337ab7;
    text-align: center;
}


table tbody, table thead
{
    display: block;
    table-layout: fixed;
    
}

table tbody 
{
   overflow: auto;
   height: 300px;
}
    
th, td { width:110px }

.colSelector tbody td:nth-child(1) {
    width: 260px;
}

.statusSelector tbody td:nth-child(1) {
    width: 200px;
}

.statusSelector{ height: 150px;}