JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<td>Heading</td>
<td>Heading</td>
<td>Heading</td>
<td>Heading</td>
<td>Heading</td>
</tr>
</thead>
<tbody>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow meow meow meow meow meow meow meow meow meow meow </td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
<tr>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
<td>meow</td>
</tr>
...
CSS
table {
width: 100%;
min-width: 550px;
}
thead tr {
/* ??? */
}
tbody {
float: left;
width: 100%;
display: block;
overflow-y: scroll;
max-height: 100px;
}
tr {
float: left;
display: block;
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
td {
float: left;
display: block;
width: 19%;
border: 1px solid red;
}