Print DIV area inside table

**asifpervez** · 11-29-2007, 07:38 AM

Hi,

I am trying to print some area of Page. I tried to use the following code and it is not working inside the table. it works only if I place the DIV tage outside table. can any body help me out?

Code:

<style type="text/css">
@media print {
body * {
display:none;
}
#print_div {
display:block;
}
}
</style>

**boogyman** · 11-29-2007, 02:08 PM

Code:

<style type="text/css" media="print">
...
</style>

use a separate stylesheet for printing

whatever your top level element is, set that to none, setting the body * is blotchy and may not even work in IE, but definitely shouldn't work in standard browsers.

Code:

<head>
<style type="text/css" media="print">
table#container {display:none}
div#print_div {display:block}
</style>
</head>
<body>

<table id="container">
... stuff ...
<tr>
<td><div id="print_div">something</div></td>
</tr>
... stuff ...
</table>

</body>

**asifpervez** · 11-30-2007, 05:21 AM

Hi boogyman,

Thanks fore yours replay. It worked but now I am facing another problem. It is shows the text in the side of the table as it displays on the webpage. I want the printed area on the top and center of the page. Here is sample page and it shows how it prints when you will click it. Can you please help me tp prin text area properly? Thanks

http://www.hrucat.com/contents/course.php?c_id=24

**asifpervez** · 11-30-2007, 05:53 AM

My problem is solved. here is what I did. Thanks for your support.

Code:

<style type="text/css" media="print">
table#hidden {display:none}
div#print {
	display:block;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	position: absolute;
	height: 100%;
	width: 100%;
}
</style>

**asifpervez** · 11-30-2007, 06:03 AM

ok my problem is solved. But I am having another issue now. I have one flash object in webpage. Now it also appears in the printing. All my text appears over that flash. It happens only in IE 6.0+, but I can print fine while I am using Firefox.

Any Clue? you can check for problem in following URL. http://www.hrucat.com/contents/course.php?c_id=24

Edit: Fixed broken link.

**tech_support** · 11-30-2007, 06:15 AM

Try this:

Code:

<style type="text/css" media="print">
table#hidden {display:none}
div#print {
	display:block;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	position: absolute;
	height: 100%;
	width: 100%;
}
object {
display:none;
}
</style>

**asifpervez** · 11-30-2007, 07:30 AM

Thanks. Every thing is fine now. I appreciate your help and support

**greendragonempire** · 12-31-2007, 05:25 PM

thanks, good info.

http://www.w3.org/TR/2003/WD-CSS21-2...#at-media-rule
http://www.dynamicdrive.com/forums/s...ad.php?t=27030
http://www.ozzu.com/ftopic32846.html
http://www.alistapart.com/stories/goingtoprint/

**thompa** · 03-22-2008, 02:03 PM

Hi,

I am having a similar issue. I tried incorporating the ideas above.. but cannot seem to make it work as I want.
On the page I have a javascript menu (AllWebMenu) and I do not want this printed when the part of the page between DIV tags is output. The menu is not between the DIV tags - but still prints!

I call my linked CSS script from within a table with:-

Code:

<div class="print" align="center"><?php include("fixtureswinter1.html"); ?></div>

The script is:-

Code:

body {
	visibility:hidden;
}

.print {

	visibility:visible;
	width: 100%;
	}

@media print {
            * {
                margin: 0 !important;
                padding: 0 !important;
            }
            h1, p {
                display: none;
            }
			table#hidden {display:none}
			div#print {
				display:block;
				left: 0px;
				top: 0px;
				right: 0px;
				bottom: 0px;
				position: absolute;
				height: 100%;
				width: 100%;
			
			}
            .scorecard form {
                border: none;
				width: 100%;
            }
        }
        @page {
            margin: 0;
        }

The menu in the table is called with:-

Code:

<span id='awmAnchor-nkmenu'>&nbsp;</span>

Any advice would be welcome!

Allan

**bobby327** · 02-13-2010, 05:00 PM

Originally Posted by boogyman

Code:

<style type="text/css" media="print">
...
</style>

use a separate stylesheet for printing

whatever your top level element is, set that to none, setting the body * is blotchy and may not even work in IE, but definitely shouldn't work in standard browsers.

Code:

<head>
<style type="text/css" media="print">
table#container {display:none}
div#print_div {display:block}
</style>
</head>
<body>

<table id="container">
... stuff ...
<tr>
<td><div id="print_div">something</div></td>
</tr>
... stuff ...
</table>

</body>

Hi
I used your suggestion and seem to be stuck:

I built a css at and posted it at: http://roatan.ws/port-schedule/print.css

I then attached the style sheet to: http://roatan.ws/port-schedule/xindex.html

Added the script between head tags:
</style>

<style type="text/css" media="print">
table#roatanportschedulefebruary {display:none}
div#print_div {display:block}
</style>

Then added in the body:

<table id="roatanportschedulefebruary">
... stuff ...
<tr>
<td><div class="style159" id="print_div">something</div></td>
</tr>
... stuff ...
</table>

When I go to my loaded page: http://roatan.ws/port-schedule/xindex.html it does not work.

Any help very appreciated I know I am missing the mark...

Jim

Thread: Print DIV area inside table

Thread Tools

Search Thread

Print DIV area inside table

Bookmarks

Bookmarks

Posting Permissions