View Full Version : Fixed header table in all browser

Mar 3rd, 2009, 03:41 PM

I found this code. This is a solution for fixed header and footer table.
It works fine only with IE6-7 and Firefox 2-3.

Is tehere a way to fix this to work with other browsers? (Opera, Safari, Chrome)


<!-- This comment keeps IE6/7 in the reliable quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Scrollable Table with Fixed Header, repeat print header and footer</title>

<meta name="keywords" content="fixed table header; non-scroll header; fixed footer; freeze header; CSS tips; print repeating headers; print repeating footers">

<link rel="stylesheet" href="basic.css" type="text/css">

<style type="text/css">
div.tableContainer {
width: 65%; /* table width will be 99% of this*/
height: 295px; /* 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;

table>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 250px;
overflow-x: hidden;

thead tr {
top: expression(offsetParent.scrollTop); /*IE5+ only*/

thead td, thead th {
text-align: center;
font-size: 14px;
background-color: oldlace;
color: steelblue;
font-weight: bold;
border-top: solid 1px #d8d8d8;

td {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: right;
border-bottom: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;

table tfoot tr { /*idea of Renato Cherullo to help IE*/
position: relative;
overflow-x: hidden;
top: expression(parentNode.parentNode.offsetHeight >=
offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);

tfoot td {
text-align: center;
font-size: 11px;
font-weight: bold;
background-color: papayawhip;
color: steelblue;
border-top: solid 1px slategray;

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/


<!-- print style sheet -->
<style type="text/css" media="print">
div.tableContainer {overflow: visible; }
table>tbody {overflow: visible; }
td {height: 14pt;} /*adds control for test purposes*/
thead td {font-size: 11pt; }
tfoot td {
text-align: center;
font-size: 9pt;
border-bottom: solid 1px slategray;

thead {display: table-header-group; }
tfoot {display: table-footer-group; }
thead th, thead td {position: static; }

thead tr {position: static; } /*prevent problem if print after scrolling table*/
table tfoot tr { position: static; }




<div id="container">

<h2>Scrollable Table with Fixed Header</h2>
<h3>Non-Scrolling Header and Footer; Printing Repeated Headers and Footers</h3>

<p>This frozen / locked HTML table header is a usability advance done without HTML fakery such as hidden tables, frames, or JavaScript. Tested in (Windows) Mozilla-spawned browsers (incl. Netscape 6+ and Firefox) and IE5+. IE has problems with the screen behavior of the footer—but thanks to a clever expression provided by Renato Cherullo, even IE6 can have a modern footer. Mozilla self-induces display problems cramming the scrollbar into the last column, which can be corrected with advanced selector syntax. Surprisingly, both render the printed version of the table consistently well, including the repeated headers and footers.</p>
<p>Links: <a href="../fall99.htm">Windows tutorial</a> on the methods used &sect; <a href="locked-column-csv.html">Extension in IE</a> to provide locked columns &sect; <a href="nonscroll-table-header2.html">Dealing with Form Selects (with Safari compatibility added)</a> in data tables &sect; <a href="nonscroll-table-header3.html">Vertical variation</a> on theme <small>(IE5.5+ only)</small>

<div class="tableContainer">
<table cellspacing="0">
<td width="18%">Station</td>
<td width="38%">Date</td>
<td width="28%">Status</td>
<td width="16%">Num.</td>
<td colspan="5">Table footer repeats on print</td>


</div> <!-- end container -->

Full code is here:


Mar 4th, 2009, 05:57 AM
Hello yvorl,
That is such a short height it doesn't seem like you'd really need a fixed header.
A fixed header is not hard to do though - http://nopeople.com/CSS/position%20fixed/ shows how to fix an element.
And a scrolling box is easy too - http://nopeople.com/CSS/scrollers/index.html

I don't know where you found that code at but I'm pretty sure that this is wrongthe "reliable" part I mean
<!-- This comment keeps IE6/7 in the reliable quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Mar 4th, 2009, 06:56 AM
Hi yvorl, I haven't checked your current code, but there was a similar thread handled by VIPStephan, which may help you too. http://www.codingforums.com/showthread.php?t=144879

Mar 4th, 2009, 08:24 AM

<!-- This comment keeps IE6/7 in the reliable quirks mode -->
This is probably wrong, but definitely need to work this code right.
This code is just an example, I'm working with more height and more content.

In the bottom of my first comment you can find the place i found the code.

I'll check the links you wrote, but according to my experience to do a cross-browser table with a fixed header is not so easy.
A fixed div box, and a scroller is just one part of the problem. It should be a table.


I've checked the the thread, and it seems to be good, but until it's not working under ie7 i've got the same problem.


If someone checked my code and found some fix, i would still appriciate it :)