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

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

How do I specify in HTML or CSS the absolute minimum width of a table cell

概括

确保表格单元格不小于某个最小宽度的最佳方法是什么。

例子

我要确保表格中的所有单元格的宽度至少为表格容器的宽度的100像素。如果有更多可用空间,则表格单元格应填充该空间。

浏览器兼容性

我可能想找到一种适用于

的解决方案

  • IE 6-8
  • FF 2-3
  • 苹果浏览器

按优先顺序。


此CSS应该足够:

1
td { min-width: 100px; }

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

编辑:就我所知,对于IE6(及更早版本)解决方案,没有一种在所有情况下都能可靠运行的解决方案。使用nowrap HTML属性并不能真正达到预期的效果,因为这只能防止单元格中的换行,而不是指定最小宽度。

但是,如果将nowrap与常规的单元格width属性结合使用(例如,使用width:100px),则100px的作用类似于最小宽度,并且单元格仍将随着文本扩展(由于nowrap)。这是一个不太理想的解决方案,无法使用CSS完全应用,因此,如果您希望将许多表应用到该表上,那么实现起来将很繁琐。 (当然,如果您想在单元格中使用动态换行符,那么整个替代解决方案都会失败。)。


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


我知道这是一个老问题,但我想我会分享一个未提及的内容(虽然在概念上非常简单..),您可以在表中放入一个(在其中一个之类的东西),然后将设置为min-width。表格将在的宽度处停止。只是以为我会把它扔在那里,以防万一有人在Google上遇到这个问题。另外,我不确定在I.E6中如何处理最小宽度。但这已经在另一个答案中涵盖了。


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

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

根据Vatos的回应和此处的最低身高文章结合而成:http://www.dustindiaz.com/min-height-fast-hack/


这是跨浏览器的方法,用于设置最小宽度和/或最小高度:

1
2
3
4
5
{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6无法理解!重要
IE 6看到宽度/高度:200像素(自动覆盖)

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

我不是100%熟悉TD元素的宽度行为,但这在DIV标签上都可以很好地工作

顺便说一句:

Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/

由于前两行的顺序不起作用,因此需要正确的顺序(考虑以上内容);)


此CSS属性的有关内容

1
min-width: 100px

但如果没有记错的话,它实际上在IE6中不起作用

如果您不想以CSS方式进行操作,我想您可以添加此属性

1
nowrap="nowrap"

在表格数据标记中


IE6将宽度处理为最小宽度:

1
2
3
4
td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

如果您希望IE6像普通浏览器一样处理宽度,请给它一个溢出:visible; (这里不是这种情况)


推荐阅读