JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<table id="tableData">
<thead>
<tr>
<th>Something 1</th>
<th>Something 2</th>
<th>Something 3</th>
<th>Something 4</th>
<th>Something 5</th>
<th>Something 6</th>
<th>Something 7</th>
<th>Something 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
...
CSS
body{
overflow: hidden;
}
#main {
overflow:scroll;
display: table;
max-height: 200px;
}
#tableData {
table-layout:fixed;
margin:auto;
width:100%;
overflow-x:auto;
}
#tableData > tbody > tr > td {
width: 120px;
padding: 1px 8px 8px 1px;
word-wrap:break-word;
}
#tableData thead, #tableData tfoot {
display:table;
width:100%;
}
#tableData tbody {
height: 100px;
overflow: auto;
display: block;
width: 100%;
}
#tableData tbody tr{
display: table;
width: 100%;
table-layout: fixed;
}
#tableData th {
min-width: 120px;
}