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 */
80px40pxrest
123
123
123
123
123
123
123
123
123
80px40pxrest
123
<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();">
80px40pxrest
123