Для кого комменты ставил?)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">window.onload=function(){
var table=document.getElementsByTagName('table')[0];
var cells=table.rows[table.rows.length-1].cells;
var hoverDiv=document.createElement('div');
hoverDiv.style.cssText="position:relative;height:10000px;margin-top:-10000px;background:#ddf;z-index:-1";
table.onmouseover=function(e){
var t=e?e.target:window.event.srcElement;
while(t.tagName!='TD'&&t.tagName!='TABLE')t=t.parentNode;
if(t.tagName=='TD') {
cells[t.cellIndex].appendChild(hoverDiv);
}
}
}
</script>
<style type="text/css">
* {margin:0;padding:0}
.fHeader td, .fHeader tr{
border:1px solid #bbb;
}
.fHeader {
*!* padding-top:47px; /* высота загаловка, соот-но если больше 1 строки-увеличить. */*/!*
width:100%; /*ширина*/
height:102px; /*высота - 24px на header, -1px на нижний border*/
/* background:#fdfffd; цвет таблицы по дефалту(не совместим с подсветкой колонок =) )*/
font-family: MS Sans serif,Verdana,Arial;
border-bottom:1px solid #bbb;
position:relative;
overflow:hidden;
}
.fHeaderScroll {
border-right:1px solid #bbb;
height:100%;
overflow:auto;
overflow-x:hidden;/*opera fix*/
}
.fHeader table {
width:100%;
border-collapse:collapse;
}
.fHeaderFix {
zoom:1 /*ie fix*/
}
.fHeader thead div{
height:0;
text-align:left;
overflow:hidden;
}
.fHeader thead div div {
height:22px; /* высота загаловка (-2px на border), соот-но если больше 1 строки-увеличить. */
background:#ddd; /*цвет header'a по дефалту*/
border:1px solid #aaa;
position:absolute;
top:0;
width:300%;
margin-left:-1px;
}
*!*.fHeader div.fHeaderLower {*/!*
*!* top:23px;*/!*
*!*}*/!*
*!* .fHeader div.fHeaderMiddle {*/!*
*!* height:45px;/* высота загаловка (-2px на border) */*/!*
*!* line-height:45px;*/!*
*!*}*/!*
*!*.fHeaderTop{*/!*
*!* margin-top:-47px; /* высота загаловка */*/!*
*!* height:45px; /* высота загаловка (-2px на border) */ */!*
border:1px solid #aaa;
position:relative;
z-index:2;
}
.fHeader tfoot tr, .fHeader tfoot td {
border-bottom:0
}
.fHeader thead tr, .fHeader thead td{
border-top:0;
}
</style>
</head>
<body>
<div class="fHeader">
<div class="fHeaderTop">
</div>
<div class="fHeaderScroll">
<div class="fHeaderFix">
<table>
<thead>
<tr>
<td>
<div><div>ученик</div></div>
<div><div class="fHeaderLower">Имя</div>Имя</div>
Вася
</td>
<td>
<div><div class="fHeaderLower">Фамилиё</div>Фамилиё</div>
Пупкин
</td>
<td>
<div><div class="fHeaderMiddle">оценка</div>оценка</div>
2
</td>
</tr>
</thead>
<tbody>
<tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
<tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
<tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
<tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
<tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
<tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
<tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
<tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
</tbody>
<tfoot>
<tr><td>Гриша</td><td>Овечкин</td><td>2</td></tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
</html>