JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">
- some optional text, this row may or may not exist -
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">
- some optional text, this row may or may not exist -
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">
- some optional text, this row may or may not exist -
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">
- some optional text, this row may or may not exist -
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="6" style="text-align:center;">
- some optional text, this row may or may not exist -
</td>
</tr>
</tbody>
</table>
CSS
td,th{
width:72px;
border:solid 1px;
}
thead,tbody{
display:block
}
tbody{
width:487px;
height:144px;
overflow:auto;
}