Hi Guys,

I need some advice on the things i wish to achieve as describe below,

I need to provide a printable page with consist of a header,detail and footer.

User requires header to be repeat on each page with footer appear only on last page.

Details are data rendered as table.

I have tried make this table scrollable, by using the example i shall paste later.

The problem i got is user need to scroll the table back to initial position before printing using browser print option to make the page to be printed correctly on few pages with header repeat as wish and footer at last page.

If user scroll till somewhere before decide to print, this will not anymore.

Hope you guys can try the example i paste to see it.


Please help !!!

<!-- This page created by bmerkey@tampabay.rr.com -->
<html>
<head>

<title>Table, non-scrolling header, repeating printed header and footer</title>

<style type="text/css">
div.tableContainer {
width: 45%; /* table width will be 99% of this*/
height: 300px; /* must be greater than tbody*/
overflow: auto;
}

table {
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: solid 1px slategray;
}

table>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 100px;
}

thead td {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: papayawhip;
color: steelblue;
border-top: solid slategray 2px;
border-bottom: solid 2px slategray;
position:relative;
top: expression(document.getElementById("data").scrollTop-2); /*IE5+ only*/
}

td {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: right;
font-family: Arial,sans-serif;
border-top: solid 1px slategray;
border-left: solid 1px slategray;
}

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

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

/*the following not used for the table effects:*/
div.details {position:absolute; width: auto; left: 48%}
h3 {color:steelblue}
p {font-size: 90%;}
</style>



<!-- print style sheet -->
<style type="text/css" media="print">
div.tableContainer {overflow: visible; }
table>tbody {overflow: visible;background-position:0% 0%}
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; }
</style>
</head>

<body>


<div class="tableContainer" id="data">
<table cellspacing="0">
<thead>
<tr>
<td width="28%">Station</td>
<td width="28%">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>
<td>WFLA</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td>10</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>


</tbody>
</table>

</div>



</body>
</html>

----------------------------------------------------------------------

Thx

airbag