Print css help
I have a three column table, each column has its own id. I want to print the 2nd and 3rd columns but my problem is they print beside each other whereas I want a one column printout.
The content in the 3rd column is wrapped inside a div and I'm thinking with absolute/relative positioning I could perhaps achieve what I want. Can anyone please help as best I can get is both chunks of text in one column but sitting on top of each other.
Have you considered using extra stylesheets for your print? E.g.
In your extra print stylesheet, you can style those columns as you want and add display:hidden to those you don't want to see.
<link type="text/css" rel="stylesheet" media="screen,handheld,tv" href="/css-main.css" />
<link type="text/css" rel="stylesheet" media="print" href="/css-print.css" />
Hope this helps, if not an actual online version of it would be appreciated for better understanding of your problem in order to provide a better solution.
It would have been much easier, of course, if you hadn't used layout tables to begin with ... ;)
In theory, you should be able to accomplish what you're after by setting display:block for the TDs in question. I don't know what the cross-browser support for changing the display property of table subelements is like, though.
Sorry, I completely overlooked the fact that you used layout tables. In which case my suggestion can be disregarded or better, do your layout again but this time use css divs, this makes it much easier as you now can use my above suggestion.
99/100 I use divs for layout (or just structural markup) but in this instance CSS wouldn't allow me to achieve what I needed to do, or at least not dynamically.
Tommy I tried the display:block route but in IE (at least) it still renders columns side by side.