Table which doesn't shrink while resizing

Question

Hello, Can someone please tell me how to create a table which doesn't shrink when the window is resized. I tried creating a table with a fixed width, but it causes problems in the Print Preview.I also tried white-space:nowrap which also didn't help. Can someone please help me to fix this.

Answer 1

So we're talking CSS / HTML here...

Can you be more specific about the problem it caused in Print Preview?

Answer 2

Commonly, one would use a different stylesheet for print, because the format is completely different. That should solve your problems.

Something like this:

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

Answer 3

The problem is that you've specified a relative width, without defining a minimum size, so the smaller the window gets the smaller the table gets. To prevent a total collapse you could use the following:

<style type="text/css" media="screen">
table
{width: 60%;
min-width: 30em; /* Or whatever you'd like to use */
}
</style>

<style type="text/css" media="print">
table
{width: auto; /* Which should fit the table to the width of the page */
}
</style>

It's not ideal, but you could compensate and use either centimetres, inches or points to prevent a width:100% element's right-most side from being eaten by the margins. Clearly that would then cause you to require certain page-sizes (A4, or whatever) for printing.