css - 将表格列压缩到可能的最小宽度

Question

在我的整个网站上，我有很多 <table> s 其中有一个特定的列，我们希望将其压缩到它的最小可能空间(没有它的文本换行)。其他同级单元自动共享剩余空间。

我正在使用以下技巧，它适用于除 IE7- 之外的所有浏览器。 (此时我其实只关心IE7)

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

jsFiddle 链接:http://jsfiddle.net/vm8gc/23/

如果您在 IE7 中尝试此操作，您会注意到它的行为有所不同(不是预期的行为)。 -- 请参见下面的屏幕截图。

谁能想出一个针对 IE7 的修复程序来实现这一点？

---

附件:

所有其他浏览器:

IE7:

Answer 1

CSS 2 版本

出于某种原因，Internet Explorer 似乎忽略了 TD 上的 white-space。解决该问题的最佳方法是在 TD 内使用跨度。

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

像往常一样，IE 做它自己的事；)

有关 white-space 支持的信息，请参见此处:

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

预版本

一种可以更好地支持旧浏览器的替代方法是执行以下操作:

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

然后让您的 pre 元素设置为与您的普通文本相同的样式或使其能够从其父元素继承样式(继承可能比仅指定样式支持更少):

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