Forum Moderators: not2easy
I spent a long time trying to figure this out, but without much success.
When users want to print a page, I would like only a specific section on the webpage to be printed. You can create a HTML page on your desktop to see my point, with the code provided at the bottom of this message.
I would only like the certain div (id="div1") and a certain table (id="tbl1") to be printed, which are originally located to the RIGHT of the webpage.
The below code only does one thing decently - hiding the stuff I don't want printed - but the layout of the page is still exactly the same. In other words, I didn't get rid of the stuff I wanted to get rid of, it just became see-through (hidden). I want the visible part that's printed to be aligned to the left, as if nothing is keeping it from being aligned to the left - which is not the case (the hidden stuff is creating a "left margin", and making the visible stuff aligned to the right).
I also experimented a lot with "display:none;" CSS attribute, but it only made things worse by hiding everything and makign it impossible to unhide the things I wanted visible.
Any help would be appreciated :)
Thanks,
NB
HTML / CSS Code:
------------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@media print {
.tbl_global{visibility:hidden;}
#tbl1{visibility:visible;}
#div1{visibility:visible;}
}
</style>
</head>
<body>
<table width="90%" border="0" cellpadding="4" cellspacing="0" class="tbl_global">
<tr>
<td valign="top" align="left" width="20%">
Item 1<br><br>
Item 2<br><br>
Item 3<br><br>
Item 4<br><br>
Item 5<br><br>
</td>
<td valign="top" align="left" width="20%">
<table width="100%" border="0" cellpadding="4" cellspacing="0" align="left">
<tr>
<td>
Item A<br><br>
Item B<br><br>
Item C<br><br>
Item D<br><br>
Item E<br><br>
</td>
</tr>
</table>
</td>
<td valign="top" align="left" width="60%">
<div id="div1">
Test DIV<br><br>
</div>
<table width="100%" border="0" cellpadding="4" cellspacing="0" align="left" id="tbl1">
<tr>
<td>
Item #<br><br>
Item &<br><br>
Item @<br><br>
Item!<br><br>
Item %<br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
----------------------------------
Me, I tend to do it the other way round. On bits that I don't want to see I put class="noprint", then in the print stylesheet .noprint{display:none;}
Right now, I have to hide the main table (which hides everything), then unhide the table I want printed... it just doesn't seem to work.
I tried using display:block (and other similar ones) to accmplish this, but it didn't unhide the table - the printout was completely empty. It seems that only visibility:visible; seems to work for unhiding items, in which case I have to use visibility:hidden; for the main table - otherwise the whole thing won't work.
The drawback, of course, is that the formatting will stay exactly the same, in which case I didn't accomplish my goal... the printed content is aligned to the right.
I am having exactly the same problem as...
I want specific sections (divs and tables) to display on the PRINT version of my files, but, apparently because they are inside other tables, it won't work...
I have tried display="none" and display="block" too, without any good results.
I've been searching on the web for a solution for a few hours, and the best ressource I found so far is your post... because I now know that I'm not alone :)
Have you found a way to fix that problem yet?
Thank you very much.
The key sentence here is "this behavior cannot be overridden by setting the 'display' property on the descendants"...
Anyway, I got my page half fixed by changing the layout. Though, if anyone has anything to add on that matter, I'd apreciate.
Thank you!
For example (this was the original content):
<table>
_<tr>
__<td>BlaBla</td>
__<td>BlaBla</td>
__<td><Table that has content of interest></td>
_</tr>
</table>
This is the printed result:
-------------
BlaBla____BlaBla____Stuff I Want Printed
-------------
After trying to hide/unhide tables, this is the best printout I got (It has an annoying left margin because the formatting stayed the same):
-------------
__________________Stuff I Want Printed
-------------
By setting the unwanted <td> tags to display:none, this is what I finally got:
-------------
Stuff I Want Printed
-------------
I guess I just didn't know that one can control <TD> tags.
NB
