Scrollable Table with Fixed Header and javascript (2)

Dynamically manage the width of the TDs

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;} /* old 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

If the predefined width of the TD is less than the content of the TD, the predefined value is ignored.
The overflow:hidden for the TD is invalid css statement.

This problem cann't be solved with pure CSS. But for javascript it is an usual task. 

<script>
  function check_width(){
    var h    = document.getElementById('header');
    var divs = h.getElementsByTagName('div');
    // the document.getElementsByClassName is not recognizable by IE
    var tab  = document.getElementById('scroll_table');
    var tds  = tab.getElementsByTagName('td');
    // I've hard coded the left+right padding of the TDs,
    // can be dynamically initialized.
    var padding_left_plus_right = 10;
    for ( var i=0;i<divs.length-1;i++ ){
        if ( divs[i].clientWidth != tds[i].clientWidth ) {
            var w = tds[i].clientWidth - padding_left_plus_right;
            divs[i].style.width = w+'px';
        }
    }
  }
</script>
Le
M....
Right Column
80px40pxrest
123
123
123
123
123
123
123
123
123

There is still one more problem: the window resizing. We can solve this with the one line of javascript code:
window.onresize = check_width;

The next javascript code shows how to create such layout for table that has % predefined width. Next