Pure CSS Scrollable Table with Fixed Header (2)

Scrollable tbody markup

<div id="table_wrapper">
  <div id="tbody">
    <table>
      <tr>
        <td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
      </tr>
      ... more rows here
    </table>
  </div>
</div>

CSS

  #table_wrapper{background:tomato;border:1px solid olive;float:left;}
  #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 red; /* to avoid the hacks for the padding */
      border-bottom:1px solid red;} 
  .td1{width:100px;}
  .td2{width:140px;}
  .td3{border-right-width:0;} /* optional */
Note: the columns from 1..last-1 must have a predefined width.

The only difference between the previous structure and this one is the width of the #tbody (417px instead of 400px), and table (400px instead of 100%). The idea with width:100% for the table was nice, but forced to use 'css hacks'. With the fixed width for the table, even IE7 with overflow-y:auto for #tbody shows the scroll bar.

Note: the difference in 17px is the predefined size for the scroll bar. That means: the width of the #tbody is the width of the table + 17px, or opposite - the width of the table is the width of the #tbody - 17px.

123
100px140pxrest
2/123
123
123
123
123
123
123
123

Start to build header:

<div id="table_wrapper">
  <div id="header">
    <div id="head1">Left</div>
    <div id="head2">Center</div>
    <div id="head3"><span>Right Column</span></div>
  </div>
  <div id="tbody">
    <table>
      <tr>
        <td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
      </tr>
      ... more rows here
    </table>
  </div>
</div>

CSS for the Header

  #header{width:417px;background:DodgerBlue;border-bottom:1px solid red;}
  #header div{padding:1px 5px;float:left;border-right:1px solid orange;}
  #header #head1{width:100px;} /* the same as td1 */
  #header #head2{width:140px;} /* the same as td2 */
  #header #head3{float:none;border-right-width:0}
  #head3 span{padding:1px 5px;}
Note: padding-left/right and width of the header columns.
    The width of the #thead and #tbody is same.

The CSS for the header is absolutely same as previous structure, just a correction for the width of #header.

Left
Center
Right Column
123
100px140pxrest
2/123
123
123
123
123
123
123
123

It seams that this approach solves all problems. No. Because of my replacement for the width of the table ('auto' for the fixed width - 400px) I got another problem. See what happens if the height of the table is less that the height of #tbody:

Left
Center
Right Column
123
100px140pxrest

I see 2 ways to works with this problem:
The first one is to change overflow-y:auto for the #tbody for overflow-y:scroll; overflow-x:hidden;}.
In this case I need the only one css hack for the Opera v:< 9.5. The horizontal scroll bar for the old Opera will be permanent.
Note: the order of these two statements is important! The newvest Opera will work as we expected.

    html:first-child #tbody{overflow:scroll;} 
    #tbody{overflow-y:scroll; overflow-x:hidden;} 
Left
Center
Right Column
123
100px140pxrest
Left
Center
Right Column
123
100px140pxrest
2/123
123
123
123
123
123
123
123
Opera 9.23 (image)
img: Opera 9.23
Opera 9.63 (images)
img: Opera 9.63

The second one: to use a small piece of the javascript code to solve this problem more natural and intelligently (see next page: static header with javascript).