JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DivTable1">
	<div class="TopLeftCell"></div>
	<div class="FixCol">
		<table> <col width=100>
			<tr><td>1 строка</td></tr> <tr><td>2 строка</td></tr> <tr><td>3 строка</td></tr>
			<tr><td>4 строка</td></tr> <tr><td>5 строка</td></tr> <tr><td>6 строка</td></tr> <tr><td>7 строка</td></tr>
		</table>
	</div>
	<div class="FixRow">
		<table> <col width=150> <col width=200> <col width=230>
		<tr><td>Воспоминания</td><td> о былой</td><td>любви.</td></tr>
		</table>
	</div>
	<div class="Content">
		<table> <col width=150> <col width=200> <col width=230>
			<tr><td>Дремлет за горой</td><td>мрачный замок мой. Душу</td><td>мучает порой царящий в нем покой.</td></tr>
			<tr><td>Я своих фантазий</td><td>страждущий герой,</td><td>О любви моей былой все образы</td></tr>
			<tr><td>со мной. Я часто вижу</td><td>страх в смотрящих на меня</td><td>глазах. Им суждено уснуть в моих</td></tr>
			<tr><td>стенах, застыть в моих</td><td> мирах. Но сердце от любви</td><td>горит, моя душа болит. И восковых</td></tr>
			<tr><td>фигур прекрасен вид.</td><td>Покой везде царит. Я их</td><td>приводил в свой прекрасный дом.</td></tr>
			<tr><td>Их вином поил и</td><td>разлекались мы потом. Иногда</td><td> у них легкий был испуг от</td></tr>
			<tr><td>прикосновенья к</td><td>нежной шее крепких рук.</td><td></td></tr>
		</table>
	</div> <!-- Content -->
</div> <!-- DivTable1 -->

CSS

table {
	border-collapse:collapse;
	table-layout:fixed;
	width:100%;
}
td{
	padding:2px 3px;
	border-left:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
}
td:first-child {border-left:0;}
#DivTable1 {
	position:absolute;
	top:27px;
	left:30px;
	height:136px;
	width:550px;
	font-family:arial,sans-serif;
	font-size:9pt;
	border:1px solid #c5c5c5;
	overflow:scroll;
}
.TopLeftCell{
	position:absolute;
	top:0;
	left:0;
	height:19px;
	width:99px;
	background:#f0f0f0;
	border-right:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
	z-index:4;
}
.FixCol {
	position:absolute;
	top:20px;
	left:0;
	width:99px;
	background:#f0f0f0;
	border-right:1px solid #c5c5c5;
	z-index:3;
}
.FixRow {
	position:absolute;
	top:0;
	left:100px;
	height:19px;
	background:#f0f0f0;
	border-bottom:1px solid #c5c5c5;
	font-weight:700;
	z-index:3;
}
.FixRow td {border-bottom:0;}
#DivTable1 .Content {
	position:absolute;
	left:100px;
	top:20px;
	right:0;
	z-index:2;
}

JavaScript

var DivTable1 = document.getElementById('DivTable1');
DivTable1.onscroll = function() {
	var xx = DivTable1.pageXOffset || DivTable1.scrollLeft;
	var yy = DivTable1.pageYOffset || DivTable1.scrollTop;

	FixCol = DivTable1.children[1];
	FixCol.style.left = xx + 'px';

	FixRow = DivTable1.children[2];
	FixRow.style.top = yy + 'px';

	TopLeftCell = DivTable1.children[0];
	TopLeftCell.style.top = yy + 'px';
	TopLeftCell.style.left = xx + 'px';
}