Printing only parts of a page 2

btween · Oct 12, 2005

I don't know if this is possible to do but I would like to add a feature to a page that allows only the contents of one <td>.... </td> to print when the person wants to print the page.

This would eliminate the header and side bars from printing and only the text and visual elements in the main comprising <td> would print.

I thought maybe it could be done globally as print nothing from the page except for the specified <td> or maybe if that's impossible I could eliminate all the other elements from printing except the <td>

Any suggestions are appreciated.

LFI · Oct 12, 2005

If I understand you correctly, you can use CSS for this. Include the following in your HEAD section of your page:

Code:

<style media="print">
/* make EVERYTHING invisible in the printout */

* {
 display:none;
} 

/* override the display:none, above, but only for class='printMe' */

.printMe {
 display:block;
} 
</style>

Then, add the "class='printMe'" to every element you want included in the printout. Nothing else should print.

'hope that helps.

--Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

btween · Oct 12, 2005

Thanks for the tip. It helps but unfortunately it does not eliminate the problem. The problem is that when you try to print the page the text runs off the margins. I thought that by eliminating the side bars, the remaining area would automatically be centered, but it seems that noting changed, and the text gets cut off in the same place. Do you have any suggestions how I could display only one <td> and have it be centered for the peint preview?

thanks

LFI · Oct 12, 2005

Ugh! I had a little trouble when I finally went to test this out.

First of all, displaying and un-displaying rows and cells in a table is always a tricky task.

If your page is drawn dynamically and you know there is only one table cell you will want to print, perhaps you can do the following [notes below]:

Code:

<html>
<head>
<style media='print'>

[b]body *[/b] {
 display:none;
}

.printMe {
 display:block;
}

.centerMe {
 margin-left:200px;
 margin-right:200px;
[b] word-wrap:break-word;[/b]
}
</style>

[b]<style media='screen'>
.screenHide {
 display:none;
}
</style>[/b]
</head>
<body>
<h1 class='printMe'>Hello, World!</h1>
<table width='100%' align='center'>
<tr>
<td>Cell A1: 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
<td>Cell A2: 22222222222222222222222222222222222222222222222222222222222222222222222222222222222222</td>
</tr>
<tr>
<td>Cell B1: 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333</td>
<td>Cell B2: 444444444444444444444444444444444444444444444444444444444444444444444444444444444444</td>
</tr>
</table>
[b]<span class='screenHide printMe centerMe'>Cell B2: 444444444444444444444444444444444444444444444444444444444444444444444444444444444444</span>[/b]
</body>
</html>

Notice that I changed the style sheet of type MEDIA='PRINT' to only hide those tags that are children to the BODY tag. That was important.

Notice, too, that the desired content for printing is repeated inside of a SPAN tag which, itself, is OUTSIDE of the TABLE. This SPAN tag is hidden from screen view (in a separate STYLE heading with MEDIA='SCREEN'), but displayed in the printout.

Finally, notice the update to the ".centerMe" class where I've added the word-wrap style.

Copy and paste the above into a textpad document and try it out.

'hope this helps!

--Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Printing only parts of a page 2

btween

Programmer

LFI

Programmer

btween

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor