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!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Print the entire content of a scrollable table.

Status
Not open for further replies.
jagi

jagi

Programmer
Mar 13, 2005
48
US
Hi,

I have a table inside a divsion with srollbar. When I say window.print(), I am just able to print the page as it is with scrollbars. I would like to able to print the entire content of the table. Can anyone help, please...

Thanks in advance.
 
Sort by date Sort by votes
Use the css media type for print.
Code: 
<style type="text/css">
...
#mydivision {
 ...
 overflow: auto;
}

@media print {
 #mydivision {
  overflow: visible;
 }
}
 
Upvote 0 Downvote
Thanks Vragabond.

I tried it. It printed the table without scrollbar.
But in the print-out, the table stretched only until the end of the page. I got additional 2 columns in the print-out(firts page), but the rest of the columns are gone. It did not print page 2.
Any ideas?

Thanks in advance.
 
Upvote 0 Downvote
Hard to say without seeing the code. Try to amend it this way:
Code: 
@media print {
 #mydivision {
  width: 100%;
  height: auto;
  overflow: visible;
 }
}
 
Upvote 0 Downvote
I tried it.
Thing is that, the table is stretching horizontally across the window, once its width is 100%, and the window is getting the scrollbar now. And so, window.print() is only printing the content seen in the window with scrollbar.
Can you help?

Thanks much for ur prompt replies.
 
Upvote 0 Downvote
I tried to do same to the body also:
@media print {
div#mainSummaryDiv {
width: 100%;
height: auto;
overflow: visible;
}
body {
width: 100%;
height: auto;
overflow: visible;
}
}

but it dint work.
 
Upvote 0 Downvote
Do you or can you make an online example? It would much easier to troubleshoot that way.
 
Upvote 0 Downvote
I tried to gfind some example web pages. I found this one.


Here you can the see thw window with horizontal scrollbar. When i do print, it doesnt print the entire content (horizontal-wise). It chops off the content at the right side.

Question is how can i print the entire content of a scrollable winow.
 
Upvote 0 Downvote
I meant if you can show your example. I understand the problem, yet with the code I provided, the thing should work. I have tested this in IE6, Mozilla and Opera 7, all with the same (successful) result:
Code: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title>Scrolling table</title>
    <style type="text/css">
	body, table {
		font: normal 0.8em Tahoma, Verdana, Arial, sans-serif;
	}

	#container {
		width: 100%;
		height: 200px;
		overflow: auto;
	}

	table {
		width: 100%;
		border-collapse;
	}

	td, th {
		border: 1px solid black;
		padding: 3px 8px;
		height: 4em;
	}

	th {
		color: white;
		background: black;
		font-weight: bold;		
	}

	@media print {
	 #container {
		height: auto;
		overflow: visible;
	 }
	}
    </style>
  </head>

  <body>
    <div id="container">
      <table width="100%" cellspacing="0">
        <tr>
          <th>cell one</th>
          <th>cell two</th>
          <th>cell three</th>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
        <tr>
          <td>cell one</td>
          <td>cell two</td>
          <td>cell three</td>
        </tr>
      </table>
    </div>
  </body>
</html>
 
Upvote 0 Downvote
Yup that works.
It works 'coz its height-wise.

My table strecthes horizontally. The winodw has got a horizontal scrollbar. Even if try to print landscape, its not printing me the entire content.

Any ideas? Thanks a lot Vragabond.



 
Upvote 0 Downvote
I don't know what you expect. As long as your table is 100% wide and 100% is not a container with a fixed size and columns are small enough not too exceed the 100%, then it should work. But again, without seeing your code, it is impossible to counsel. And furthermore, is there physically a way to stretch that table to fit?
 
Upvote 0 Downvote

i have a question about this tread:

when you use this

Code: 
    @media print {
     #container {
        height: auto;
        overflow: visible;
     }

how do you initiate it? the actual print action...

- g

 
Upvote 0 Downvote
It happens when you 'print' or 'print preview' from the browser.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
816
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
769
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
230
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top