如何在HTML或CSS中指定表格单元格的绝对最小宽度？

Question

摘要

如何确保表格单元格的最小宽度不低于一定值是最佳方法？

示例

我想确保表格中的所有单元格都至少有100像素的宽度，无论表格容器的宽度如何。如果有更多的可用空间，则表格单元格应填充该空间。

浏览器兼容性

如果可能的话，我希望找到适用于以下浏览器的解决方案：

• IE 6-8
• FF 2-3
• Safari

按首选顺序排序。

- Edward Wilde

Answer 1

这个CSS应该足够：

td { min-width: 100px; }

但并非所有浏览器都能正确地遵循(min-width属性)，例如，IE6非常不喜欢它。

编辑: 至于IE6(和之前的版本)的解决方案，据我所知，在所有情况下都没有一种可靠的解决方案。使用nowrap HTML属性并不能实现预期的结果，因为这只是防止单元格换行，而不是指定最小宽度。

然而，如果在nowrap与普通的单元格宽度属性（例如使用width: 100px）一起使用，则100px将像最小宽度一样起作用，并且由于nowrap，单元格仍将随着文本而扩展。这是一个不太理想的解决方案，无法完全使用CSS实现，因此，如果您有许多表格希望应用此解决方案，那么将会很繁琐。(当然，如果你想要动态换行的单元格，那么整个替代解决方案也会失败)。

- James Burgess

Answer 2

另一个技巧是使用旧的1x1透明像素技巧。插入一个1x1的透明gif图像，并在图像标签中设置其宽度为所需宽度。这将强制单元格至少与图像一样宽。

- Michael Haren

---

跨浏览器的CSS中有技巧吗？我认为只有标准和“人们真正做的事情”。 - Dan Rosenstark

这是一个相当过时的hack...有更好的方法来解决这个问题，而不需要加载一个单独的图像，即使其他方法也是hack。 - Nightfirecat

Answer 3

我知道这个问题很老了，但我想分享一些未被提到的内容（虽然概念非常简单...），你可以在表格中放置一个<div>（在其中一个<td>中）并设置<div>的 min-width属性。表格将会停在<div>的宽度处。如果有人在Google上搜索到这篇文章，我觉得这可能会对他们有所帮助。另外，我不太确定IE6如何处理min-width，但是这已经在另一个答案中涉及过了。

- Partack

Answer 4

我在以下方面取得了一些成功：

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

基于Vatos的回答和这里的一个关于min-height的快速hack的文章：http://www.dustindiaz.com/min-height-fast-hack/

- Dean Peters

Answer 5

这是一种跨浏览器的设置最小宽度和/或最小高度的方法：

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6不理解!important

IE 6看到width/height:200px（覆盖auto）

其他浏览器理解min-和!important

我不完全了解TD元素中宽度的行为，但在DIV标记上所有内容都可以正常工作

顺便说一句:

根据Vatos的回答和这里的min-height文章：http://www.dustindiaz.com/min-height-fast-hack/

这不起作用是因为第一和第二行的顺序需要正确（考虑上面的内容）;)

- Prof

Answer 6

这个CSS属性怎么样？

min-width: 100px

但如果没有记错的话，在IE6中它并不是真正有效的。

如果您不想使用CSS的方式来做，我想您可以添加这个属性。

nowrap="nowrap"

在您的表格数据标签中。

- Jeffrey04

Answer 7

IE6将宽度视为最小宽度：

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

如果你想让IE6像正常浏览器一样处理宽度，请给它一个overflow:visible;（这里不是这种情况）。

- Vatos

---

这似乎不起作用，单元格无法保持最小宽度。如果浏览器调整大小为150px，则单元格宽度会缩小到100px以下。 - Edward Wilde