Printing problem when DIV height is set 2

[Einstein47]

Hey all,

I have a strange problem. I found this code that keeps the header of a table at the top and allows the user to scroll the table data in a small DIV. It works great for online, but when the user wants to print the page and the table contains a lot of data, only the first so many lines get printed.

Here is the code snip for my DIV and TABLE:

<DIV style="height: 50%; overflow: auto;">
<TABLE border="0" cellspacing="2" cellpadding="1" width="100%">
<THEAD>
<TR class="tableHeadDark" style="position:relative;top:expression(this.offsetParent.scrollTop-2);">
<TH>COL 1</TH>
<TH>COL 2</TH>
<TH>COL 3</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Data</TD>
<TD>Data</TD>
<TD>Data</TD>
</TR>
....
</TBODY>
</TABLE>
</DIV>

This only works in IE, but it is really slick for online viewing of large tables of data. You need to make sure that the number in the cellspacing matches the number subtracted from the scrolltop.

I would love to know what to do so that when the page is printed the div is ignored. Is that even possible?

Thanks in advance - and if you want to use this lock table head row or have any questions about it - feel free to ask.

Einstein47
(For best results: hand wash in cold, tumble dry low. For not so good results: drag through puddles, pound on rocks, air dry on tree branch.)

 

[traingamer]

Have you tried a print stylesheet with overflow: visible on the DIV?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[vacunita]

Have you tried using a separate style for mediarint?

http://www.w3.org/TR/REC-CSS2/media.html

You can specify a different style for printing than for viewing. So you could change the height attribute to auto so it shows the entire table when printed.


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Einstein47]

I have just read up on creating a print stylesheet - and I can set the DIV overflow: visible there, and that seems to print the whole table YEAH!!!.

However (a better word than but), now my header is showing up in the middle of the second page of output (my test had 3 pages of data). So I'm thinking that the "magic" that causes the header row to stay at the top of the screen view is causing more issues on the printed version. Should I just move that inline style to a class in my screen stylesheet and the print stylesheet could override that definition? I'll try that.

Man I love how easy it is to get smart answers from tek-tips. Thanks to both of you for pointing me to the print stylesheet. Now lets see if the header issue is just as easy to resolve.

Einstein47
(For best results: hand wash in cold, tumble dry low. For not so good results: drag through puddles, pound on rocks, air dry on tree branch.)

 

[Vragabond]

That would work, although I would suggest you use a nice cross-browser solution that was already tested for all the quirks and errors.

http://www.imaputz.com/cssStuff/bigFourVersion.html

 

[Einstein47]

Sorry, Vragabond - but that page doesn't work on IE 7.0 Not totally sure why, but at this point I would have to give very strong reasons to move away from our current solution. (once code hits production it takes a congressional order to change it).

I'm still wondering how the pure CSS solution works without the expression to know how to position the top of the table elements. I'll have to attack it later when I can focus more on the reasoning behind it. Thanks again for the heads up.

Einstein47
(For best results: hand wash in cold, tumble dry low. For not so good results: drag through puddles, pound on rocks, air dry on tree branch.)