Scrollable Table with Fixed Header and javascript
Today javascript is the number one web language, and can help to solve many not just behavior problems, but problems relatived with a visual presentation of the web page.
Scrollable table markup
<div id="table_wrapper">
<div id="header">
<div id="head1">Le</div>
<div id="head2">M....</div>
<div id="head3"><span>Right Column</span></div>
</div>
<div id="tbody">
<table id="scroll_table">
<tr>
<td class="td1">80px</td>
<td class="td2">40px</td>
<td class="td3">rest</td>
</tr>
... more rows here
</table>
</div>
</div>
CSS
#table_wrapper{background:DodgerBlue;border:1px solid olive;float:left;}
#header{ width:417px; border-bottom:1px solid red;background:DodgerBlue;}
#header div {padding:1px 5px; overflow:hidden;}
#head1{float:left; width:80px; border-right:1px solid orange;}
#head2{float:left; width:40px; border-right:1px solid orange;}
#head3 span{padding:1px 5px;}
html:first-child #tbody{overflow:auto;} /* older Opera */
#tbody{height:80px;overflow-y:auto;width:417px;background:yellow;}
table{border-collapse:collapse;width:400px;}
td{padding:1px 5px; /* pixels */
border-right:1px solid green; /* to avoid the hacks for the padding */
border-bottom:1px solid green;}
.td1{width:80px;}
.td2{width:40px;}
.td3{border-right-width:0;} /* optional */
<script>
function check_height(){
var st = document.getElementById('scroll_table');
var tb = document.getElementById('tbody');
if ( st.clientHeight < tb.clientHeight ) {
st.style.width = tb.clientWidth + 'px';
}
}
</script>
And
<body onload="check_height();">