将表格列压缩为最小宽度 [英] Squeeze a table column to it's minimum possible width

问题描述

在我的整个网站中，我有许多< table> ，其中有一个特定的列，我们希望被挤压到尽可能最小的空间包裹）。其他同级单元格自动共享空间的其余部分。

我使用下面的技巧，它适用于所有浏览器，除了IE7-。 （此时我实际上只关心IE7）

  table {width：100％;} 
表td。 min-col {white-space：nowrap; width：1px; } 
  

jsFiddle链接：

PRE版本

另一种可以更好地支持旧版浏览器的方法是执行以下操作：

 < td>< pre>这不会换行< / pre>< / td> 
  

然后将您的pre元素设置为与正常文本相同的样式或允许它继承自父母的样式（继承可能只有较少的支持，只是指定样式）：

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

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:

解决方案

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; ... }

这篇关于将表格列压缩为最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！