JSFiddle - React, Tailwind, and code Playground
HTML
<div class="scrollTableContainer">
<table class="dataTable" cellspacing="0">
<thead id="mythead">
<tr id="mytr">
<th>Station</th>
<th>Date1</th>
<th>Date2</th>
<th>Status</th>
<th>Num.</th>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td>10</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WPPP</td>
<td>09/16/2002</td>
<td>09/16/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WRRR</td>
<td>09/06/2002</td>
<td>09/06/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>09/21/2002</td>
<td>09/21/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>W000</td>
<td>11/11/2002</td>
<td>11/11/2002</td>
<td>Submitted</td>
<td>7</td>
</tr>
<tr>
<td>KABC</td>
<td>10/01/2002</td>
<td>10/01/2002</td>
<td>Submitted</td>
<td>10</td>
</tr>
<tr>
<td>KCBS</td>
<td>10/18/2002</td>
<td>10/18/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>10/18/2002</td>
...
CSS
table.dataTable {
margin: 0;
padding: 0;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
color: #235A81;
font-family: Arial;
font-size: 9pt;
}
table.dataTable th {
margin: 0;
border-right: 1px solid #999;
border-top: 1px solid #999;
font-weight: normal;
padding: 4px 3px 3px 4px;
background: #ccc;
font-weight: bold;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
text-align: left;
width: 150px;
}
table.dataTable td {
margin: 0;
border-right: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 3px 3px 4px
}
div.scrollTableContainer {
height: 285px;
overflow: auto;
width: 900px;
margin: 15px 0 0 0;
position: relative;
}
div.scrollTableContainer table {
width: 952px;
}
div.scrollTableContainer td:last-child {padding-right: 20px;}
div.scrollTableContainer tr:first-child td { border-top: 0; }
div.scrollTableContainer thead th {border-bottom: 1px solid #999; }