I have a very large HTML table that I would like to print on an A3 paper on landscape orientation, but I can’t seem to make it work. My print.css file looks like this:
table {
width: 42cm;
height: 29cm;
}
When I try to print it, the table doesn’t have this size and just about half of it is visible. What am I doing wrong?
What happens if you try this?
table {width:100%}
I’m not sure I would use a height. The table will find its own height.
Nothing happens…
Meaning? … nothing changes? The page is blank? Perhaps post the full code you have, as it would handy to test it out.
Meaning nothing changed, I get the same result that I got when I used
width: 100%;
You can see an online version here: Area Linea Domus - Login
Login with the credentials: test - test
Click on Tabella A3
Select something from the two dropdown menus and click on Cerca.
That’s the table I would like to print.
Hmm, when I go to print that page, there’s no print.css file on that page. It just isn’t there in the head of the document. Where is that stylesheet? You need to place a link to it in the head for it to operate.
Wow, you are right xD I was working locally. I’ve added the link and the print.css but it looks like it’s still not working.
You will probably have to try something a lot less than 100%, because I’ve just noticed there’s a lot of padding on each cell, which will all be added to the overall width. To better control that, perhaps you could set the padding on each cell as something like 1%, or maybe eliminate padding altogether and just set widths on each cell. Do you know how many cells there are?
It might also help to shoot for less than 100% anyway, as most desktop rinters don’t print right to the edge anyway.
And are you choosing Landscape as the page setup?
I don’t know why, but every instruction that I write about the size of the table gives me no results, the table maintains the same size.
Do you know how many cells there are?
Yes, a maximum of 30.
And are you choosing Landscape as the page setup?
Do you mean in the CSS or in my printer options?
Yes, I meant choosing landscape in the printer options.
I would suggest removing all padding from your table cells and letting the content dictate the width of the table, or do something like remove all padding and set the table cells to a width of 3% or something. Just thinking out loud here.
Yes, I’m choosing landscape as page setup.
I would suggest removing all padding from your table cells and letting the content dictate the width of the table, or do something like remove all padding and set the table cells to a width of 3% or something. Just thinking out loud here.
I’ve removed all padding from <td> elements and set their width first to 3% and then to 0.5cm, but the problem remains 
It might be to do with your page setup for your printer and I assume you are using CSS ‘Print’ media to define the TABLE itself? In either case print CSS are just guidelines and table cells are only supposed to accommodate their contents regarding size.
You could be better off creating a test page with a TABLE and no other styling but CSS print media for the table.
I don’t understand what you mean with this…
You could be better off creating a test page with a TABLE and no other styling but CSS print media for the table.
I’ve commented out all the other stylesheets (in my local environment). I’ve managed to set the size of the cells somehow adding some padding. But somehow the width: 100% rule doesn’t work (with or without padding). Whatever settings I use the table does not cover the entire page.
Generally table cells only adapt to the width of their widest content. However, you are trying to print a TABLE hence you probably need to employ CSS print media e.g. @media print. The browsers don’t have to honour your page dimensions. But obviously the page would need margins declaring too. Print media is basically fixed dimension so you’d probably need all absolute units to force the table to a specific size.
In the olden days you could use: @page { size: landscape; } but it was found to be problematic; so now you only really have margin values to help.
Now, a question I’m not seeing asked – what browser?
IE and FF horribly mangle “for print” CSS if you don’t turn off their “let’s reformat it even when the author is telling us how to do it” bull.
Test print from Opera, see if that helps – alternatively, in IE and FF go into … ah christmas on a cracker, where the bugger did they hide “page setup” in 4 (I swear, can’t find a blasted thing with this reduced menu bull)… I think it’s “print background (colors and images)” that actually fixes it as it also mangles layout assuming nobody EVER prints at anything other than 8.5x11… Both IE and FF also have a ‘shrink to fit’ option that also seems to ignore what you set for a page size rendering it too useless. Making sure both those checkboxes are disabled may alleviate your problem.
Had a client who wanted to use HTML to print out forms and went through this nonsense. The two highest use browsers can be a royal pain in ones backside when it comes to them accepting print CSS.
I’ve not checked webkit browsers on that though – wonder how bad they are about it?
Opera gives me a blank page 
About Webkit browsers, I don’t know how they behave in general, but they don’t work properly in my case, like the other browsers.