Fixed header table in all browser [Archive]

yvorl

03-03-2009, 02:41 PM

Hi!

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)

Thx


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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 {
position:relative;
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*/

</style>


<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; }

</style>

</head>

<body>

<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 § <a href="locked-column-csv.html">Extension in IE</a> to provide locked columns § <a href="nonscroll-table-header2.html">Dealing with Form Selects (with Safari compatibility added)</a> in data tables § <a href="nonscroll-table-header3.html">Vertical variation</a> on theme <small>(IE5.5+ only)</small>
</p>

<div class="tableContainer">
<table cellspacing="0">
<thead>
<tr>
<td width="18%">Station</td>
<td width="38%">Date</td>
<td width="28%">Status</td>
<td width="16%">Num.</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Table footer repeats on print</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
..
..
</tbody>
</table>

</div>

</div> 
</body>
</html>

Full code is here:

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html