Make table tboby scroll with thead and tfoot fixed on both IE5+ and Firefox
Make a table to be fixed size with a given height and a thead and tfoot fixed is a real nightmare with Internet Explorer.
After spending a lot of time to do the follwing CSS to make it possible I decide to make this code public on my blog.
Live example
This code is Firefox and IE5+ Compatible
<html> <head> <style type="text/css"> div.tableContainer { width: 500px; /* table width will be 99% of this*/ height: 290px; /* must be greater than tbody*/ overflow: auto; margin: 0 auto; } table { width: 99%; /*100% of container produces horiz. scroll in Mozilla*/ border: none; background-color: #f7f7f7; } /* * Specific Firefox. Only Modern browser are able to interpret > . IE is not a modern browser */ table>tbody { overflow: auto; height: 250px; overflow-x: hidden; } /* * Traget is IE5+ only. Only IE is able to interpret this kind of horrible expression Script * ---------- * FOR HEADER */ thead tr { position:relative; top: expression(offsetParent.scrollTop); } /* * Traget is IE5+ only. Only IE is able to interpret this kind of horrible expression Script * ---------- * FOR FOOTER * ---------- * Some explaination : * with pseudo code : * if (scroll_is_needed){ * top = container_height + table_scrollTop - table_Height * } else { * //tfoot should be at the same place if there is a scroll or not * top = container_height - table_height; * } */ table tfoot tr { position: relative; overflow-x: hidden; top: expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? offsetParent.offsetHeight + offsetParent.scrollTop - parentNode.parentNode.offsetHeight : offsetParent.offsetHeight - parentNode.parentNode.offsetHeight); } /* * Classical Css */ thead td, thead th, tfoot td { text-align: center; background-color: #C3C3C3; font-size : 12px; color: white; font-weight: bold; border-top: solid 1px gray; } td { color: #666666; padding-right: 2px; text-align: center; font-size : 12px; border-bottom: solid 1px #C3C3C3; /* Do not mark double boder */ border-left: solid 1px #C3C3C3; } /* * FF scroll hide last column. * prevent this case */ td:last-child { padding-right: 20px; } </style> </head> <body> <div class="tableContainer"> <table cellspacing="0"> <thead> <tr> <td width="30%">Header cell1</td> <td width="30%">Header cell2</td> <td width="20%">Header cell3</td> <td width="20%">Header cell 4</td> </tr> </thead> <tbody> <tr> <td>a</td> <td>a</td> <td>a</td> <td>a</td> </tr> ... <tr> <td>z</td> <td>z</td> <td>z</td> <td>z</td> </tr> </tbody> <tfoot> <tr> <td colspan="5">Table footer repeats on print</td> </tr> </tfoot> </table> </div> </div> </body> </html>
