Entry

Why does a table with a fixed width not line wrap when printing? Is there a workaround?

Sep 19th, 2002 06:25
Mason Womack, Marcus Young,

Simply put, this is because the table is a "fixed width" (and I am 
assuming this is, in your case, wider than a sheet of paper).  The 
printer wants to print the entire width of the table, but can obviously 
only print as wide as the paper so it truncates the right edge.
I have never heard of a "line wrap" in a table so to say.
It is hard to suggest a work-around without an idea of the table in 
question and what it is structured like, what is in it, cols, rows, etc.
(I personally use "width=##%" in my tables as opposed to fixed width 
where possible, as this tends to be more cross browser friendly in most 
cases, and can be easily fit into a printable format.  If this won't 
work for you, continue reading...)
One suggestion I could make would be to create individual tables for 
each of your cells/columns (depending on data inside the table), with 
no line break between, and adjust the borders, padding, etc., so they 
would stack side by side and appear to be one wide table.  In this way, 
however, the tables would effectively "wrap" to the next line as soon 
as it would start to run off the page.  (But, they will also wrap on 
screen.)
To keep your table as wide as it is now on the screen, if you like it 
that way, keep what you have now and just put some <div> </div> tags 
around it.  Write more code for the printing (like I suggest above, 
with multiple seperate tables) also inside <div> tags just below the 
original code.  Create a style sheet called print.css and one called 
screen.css.
In print.css just create a class like this:
.HideOnPrint {
display : none;
}
In screen.css, do the same.
.HideOnScreen {
display : none;
}
Add these classes to your divs that you nested the code in:
<div class="HideOnPrint">
-for the div tag before your on-screen table coding (i.e. The one that 
shows up in the browser, so it won't print)
<div class="HideOnScreen">
-for the div tag before your printing tables coding (i.e. The one that 
shows up when printed, so it never displays in the browser.)
Finally, and importantly, link these style sheets in the header of your 
HTML document, using the "media" types, in the following way:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
If it is just one really wide table, then this was all probably useless 
for your purposes, but hopefully this has helped!
Happy coding,
Mason