<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>
#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.
1 | 2 | 3 |
100px | 140px | rest |
2/1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
<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>
#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.
1 | 2 | 3 |
100px | 140px | rest |
2/1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
1 | 2 | 3 |
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:
1 | 2 | 3 |
100px | 140px | rest |
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;}
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).