Question

Throughout my website, I have many <table>s in which there is a specific column we want to have squeezed to it’s minimum possible space (without having it’s text wrapped). Other sibling cells share the rest of the space automatically.

I’m using the following trick and it works in all browsers except IE7-. (At this time I actually 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 it acts differently (not expected behavious). — see screen capture below.

Can anyone think of a fix for IE7 to achieve this?

---

Attachments:

All other browsers:

IE7:

Answer 1

CSS 2 Version

For some reason Internet Explorer seems to ignore white-space on TDs. Best way around the problem is to use a span inside the TD.

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

As usual IE doing it’s own thing 😉

For info on white-space support, see here:

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

PRE Version

An alternative which would have better support with older browsers would be to do the following:

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

And then have your pre element set-up to either be styled in the same way as your normal text or enable it to inherit style from it’s parents (inheriting probably has less support that just specifiying the style):

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