Is it possible to change the width of a table with CSS while printing?

Question

I need to change the width of the table while printing the page using

<link rel="stylesheet" type="text/css" href="../css/reportPrint.css" media="print" />

Can I change the width of the table while printing from the CSS file?

Any help would be appreciated.

Answer 1

You can use a print stylesheet to set additional CSS properties when printing, by adding into the head element:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Then in the print.css file, set out your additional/different properties, e.g.:

table {
   width:80em;
}

edit: original post had invisible code until edit after I posted, so I don't know if this answers your question.

Answer 2

Yes, absolutely this can be accomplished and it's the reason and purpose of the print media stylesheet.

Keep in mind that stylesheets are cumulative -- so if you want to incorporate all your styling from your normal screen stylesheet then you need to include print to your media="screen, projection, print" link attribute.

This means that CSS rules in the screen stylesheet will compete with your print stylesheet rules in terms of specificity. If your screen stylesheet declares a width

 #content table#results { width: 900px; }

then your print stylesheet must exceed that specificity in its rules or match them and appear last. A lesser specific rule won't override that screen rule.

However, if you specify the table width in the HTML markup, eg <table width="400"> then you've lost the battle because there's virtually no way for a stylesheet rule to override what amounts to an inline CSS rule. You must declare the width in your screen stylesheet, then override it in your print stylesheet.