JSFiddle - React, Tailwind, and code Playground

HTML

<table...

CSS

table.static-header {
display: block;
empty-cells: show;
border-spacing: 0;
border: 1px solid #000000;
}

table.static-header thead {
display: block;
position: relative;
width: 100%;
overflow-y: scroll;
}

table.static-header tbody {
display: block;
overflow-y: scroll;
position: relative;
width: 100%;
max-height: calc(100vh - 250px);
}

table.static-header tr {
width: 100%;
display: flex;
}

table.static-header th,
table.static-header td {
flex-basis: 100%;
flex-grow: 2;
display: block;
border: 1px solid #000;
}

table.static-header th:first-child,
table.static-header td:first-child {
flex-basis: 50%;
flex-grow: 1;
}