Compress the table column with the smallest possible width

Question

On my website I have a lot of <table> in which there is a specific column that we want to squeeze at least the possible space for it (without wrapping it with text). Other sibling cells automatically share the rest of the space.

I use the following trick and it works in all browsers except IE7-. (At this time, I really only care about IE7)

 table {width:100%;} table td.min-col {white-space:nowrap; width:1px; } 

jsFiddle link: http://jsfiddle.net/vm8gc/23/

If you try this in IE7, you will notice that it acts differently (it was not expected to be so). - see screenshot below.

Can anyone think of a fix for IE7 for this?

---

Applications:

All other browsers:

IE7:

Answer 1

CSS Version 2

For some reason, Internet Explorer seems to be ignoring white-space for TD. The best way to solve the problem is to use the range inside the TD.

 <td><span style="white-space: nowrap;">This should not wrap</span></td> 

As usual, IE does its own thing;)

For white-space support information, see here:

http://www.quirksmode.org/css/whitespace.html

PRE version

An alternative that could better support older browsers would be to do the following:

 <td><pre>This will not wrap</pre></td> 

And then your presetting the element will either be styled just like your regular text, or allow it to inherit the style from it. (inheritance probably has less support, which just indicates the style):

 td pre { font-family: inherit; font-size: inherit; color: inherit; ... }