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{width:80%;background:DodgerBlue;border:1px solid olive;float:left;}
  #header{border-bottom:1px solid red;background:DodgerBlue;} /* no width */
  #header div {padding:1px 5px; overflow:hidden;}
  #head1{float:left; border-right:1px solid orange;} /* no width */
  #head2{float:left; border-right:1px solid orange;} /* no width */
  #head3 span{padding:1px 5px;}
  html:first-child #tbody{overflow:auto;} /* older Opera */
  #tbody{height:80px;
    overflow-y:auto;overflow-x:hidden;
    background:yellow;
  } /* no width */
  table{border-collapse:collapse;width:100%;}
  td{padding:1px 5px; /* pixels */
      border-right:1px solid green; /* to avoid the hacks for the padding */
      border-bottom:1px solid green;} 
  .td1{width:30%;} /* optional ! */
  .td2{width:10%;} /* optional ! */
  .td3{border-right-width:0;} /* optional */

Javascript Code

<script>
  function check_height(){
    var t = document.getElementById('scroll_table');
    var tb = document.getElementById('tbody');
    if ( t.clientHeight < tb.clientHeight ) {
      t.style.width = tb.clientWidth + 'px';
    }
  }
  var ie7Flag = false; // see explanation below
  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');
	
    // IE 7 decides: if table has % width -
    // no need to put scroll bar to the parrent wrapper.
    // I explicitly put the width for the table and #tbody after a 
    // browser calculated how many pixels is the width:80% of the #table_wrapper.
    // If you use any browser detecting mechanism, you can use this code
    // only for IE7. 
    if ( ! ie7Flag ) {
        var wr   = document.getElementById('table_wrapper');
        var tb   = document.getElementById('tbody');
        tab.style.width = wr.clientWidth+'px';
        tb.style.width = wr.clientWidth+'px';
        ie7flag = true;
    }
    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>
width:30%width:10%
123
123
123
123
123
123
123
123
123
FF onresize event (image)
IMG: FF on resize 
	Add javascript code:
	window.onresize = check_width;
	And
	if you use any addOnLoadEvent function add the calls
	check_height();check_width(); to it.
	OR
	<body onload="check_height();check_width();">