JSFiddle - React, Tailwind, and code Playground

HTML

<table>
	<thead>
		<tr><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th><th>a</th></tr>
	</thead>
	<tbody>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
		<tr><td...

CSS

table{
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: 2.5em;
	width: 600px;
	height: 300px;
	overflow: scroll;
	grid-gap: 2px;
}
thead, tbody, tfoot{
	display: contents;
}
th, td{
	border: 1px black solid;
	display: grid;
	justify-content: center;
	align-content: center;
}
tr{
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(11, 100px);
	grid-gap: 2px;
}
thead>tr, tfoot>tr, tr>*:first-child, tr>*:last-child{
	position: sticky;
}
thead>tr, tfoot>tr{
	z-index: 2;
}
:not(tbody)>tr>*{
	background-color: yellow;
}
tr>*:first-child, tr>*:last-child{
	z-index: 1;
	background-color: pink;
}
thead>tr{top: 0;}
tfoot>tr{bottom: 0;}
tr>*:first-child{left: 0;}
tr>*:last-child{right: 0;}