<!DOCTYPE html>
<html>
<head>
<style>
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:142px;
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;
}
.FixRow2 {
position:absolute;
top:153px;
left:0;
width:99px;
background:#f0f0f0;
border-right:1px solid #c5c5c5;
z-index:3;
}
</style>
</head>
<body>
<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 class="FixRow2">
<table> <col width=150> <col width=200> <col width=230>
<tr><td>Воспоминания</td><td> о былой</td><td>любви.</td></tr>
</table>
</div>
</div> <!-- DivTable1 -->
<script>
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';
FixRow2 = DivTable1.children[3];
FixRow2.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';
}
</script>
</body>
</html>
