Nested tables, hide some parts in printing

[damipera]

Hi guys, can you give me some ideas how I should go about hiding the outer tables using CSS? here's the sample code:

<table width="100%" height="175" border="3" cellpadding="0" cellspacing="0" id="MainTable">
<tr>
<td><table width="100%" height="124" border="3" cellpadding="0" cellspacing="0" id="secondaryTable">
<tr>
<td>&nbsp;</td>
<td><table width="100%" height="54" border="3" cellpadding="0" cellspacing="0" id="innerTable">
<tr>
<td>test123 test123 </td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>


I want to hide the tables "MainTable" and "secondaryTable" but want to show the table "innerTable". I would like to do that for printer-friendly versions of my pages. I know the outer tables affect everything inside them but is this possible at all?

Thanks for any ideas.

 

[BillyRayPreachersSon]

Given there's nothing in them, perhaps simply setting their height and turning off the borders in your print CSS would do the job?

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

E.g.:

#MainTable,
#secondaryTable {
    height: 54px;
    border: none;
}

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[damipera]

Hi BillyRayPreachersSon,

The actual outer tables have widths in pixels. The main reason I would like to have a printer-friendly version using print CSS is because the pages are clipped on the right side when it's printed.

What if there are images and texts in those outer tables?

Would the CSS code above still be applicable?

Thanks Billy.

 

[BillyRayPreachersSon]

What if there are images and texts in those outer tables?

Would the CSS code above still be applicable?

Probably not. Perhaps posting your real code might yield a more accurate answer?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[damipera]

Hi Dan here's the code. It's basically similar to the one I previously posted. This one has got some img tags on.


<table width="1005" height="175" border="3" cellpadding="0" cellspacing="0" id="MainTable">
<tr>
<td><table width="100%" height="124" border="3" cellpadding="0" cellspacing="0" id="secondaryTable">
<tr>
<td valign="top"><p>Manual</p>
<p><img src="images/5Cs.jpg" width="222" height="27" /></p>
<p><img src="images/289Fg7_9.jpg" width="268" height="130" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td><table width="100%" height="54" border="3" cellpadding="0" cellspacing="0" id="innerTable">
<tr>
<td><p><img src="images/289asta.jpg" width="399" height="397" /></p>
<p><img src="images/289Fig810.jpg" width="273" height="149" /></p>
<p>test123</p></td>
</tr>
</table></td>
<td><p><img src="images/hc_pp_rf.gif" width="292" height="135" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="images/289Fig2_140.jpg" width="273" height="149" /></p></td>
</tr>
</table></td>
</tr>
</table>

 

[Vragabond]

If you can give your td elements classes, then you could individually hide those and allow the main td elements to grow. Other than that, you could try designing without tables, which makes such "printer-friendly" pages much easier.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[damipera]

Hi Dan, what do you mean by "allow the main td elements to grow."?

 

[Vragabond]

I am not Dan.

If you have a table with two columns, one is 100px and the other one is the rest of a 900px table, then the other one is 800px. However, if you make the first column 1px, the other column will be "allowed to grow" to 899px.

That said, first thing you should do on the printer-friendly page is set the outer table to 100% width. Because you want to use 100% of the available paper size and not 1005px on paper, which cannot really be translated into any worthwhile measurement on a printed document.

Then, if you make your table layout fixed, you could make all the non-important columns/rows really small.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]