Question

摘要

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

实施例

我想确保表中容器的宽度至少为100px宽。如果有更多的可用空间，表格单元格应该填充该空间。

浏览器兼容性

我可能想找到一个适用于

的解决方案

IE 6-8
FF 2-3
Safari浏览器

按优先顺序排列。

Answer 1

这个CSS应该足够了：

td { min-width: 100px; }

然而，所有浏览器并不总是正确地遵守（min-width属性）（例如，IE6不喜欢它）。

编辑：至于IE6（以及之前）的解决方案，据我所知，在所有情况下都没有可靠的解决方案。使用nowrap HTML属性并不能真正实现所需的结果，因为这样可以防止单元格中的换行符，而不是指定最小宽度。

但是，如果nowrap与常规单元格宽度属性（例如使用宽度：100px）一起使用，则100px将表示最小宽度，单元格仍将随文本一起展开（由于nowrap）。这是一个不太理想的解决方案，无法使用CSS完全应用，因此，如果您希望将许多表应用于此，则实施起来会非常繁琐。（当然，如果你想在你的单元格中使用动态换行符，这整个替代解决方案都会失败。）

Answer 2

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

Answer 3

我知道这是一个老问题，但我想我会分享一些未提及的内容（虽然在概念上非常简单..）你可以在表格中放一个<div>（在其中一个中） <td>或其他内容）并将<div>设置为min-width。表格将以<div>的宽度停止。只是想我会把它扔出去，万一有人在谷歌遇到这个。另外，我不太确定在I.E6中如何处理最小宽度。但这已经在另一个答案中得到了解释。

Answer 4

我取得了一些成功：

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

基于Vatos的回复和最小高度文章的组合：http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

这个css属性怎么样？

min-width: 100px

但如果没有弄错的话，它在IE6中确实不起作用

如果您不想以css方式进行，我想您可以添加此属性

nowrap="nowrap"

表格数据标签中的

Answer 6

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

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

IE 6不明白！重要的是 IE 6看到宽度/高度：200px（覆盖自动）

其他浏览器了解min和the！important

我不是100％熟悉TD元素中宽度的行为，但这一切都适用于例如DIV标签

顺便说一句：

基于Vatos的回复和最小高度文章的组合：http://www.dustindiaz.com/min-height-fast-hack/

这是因为前2行的顺序不起作用，它们需要按正确的顺序排列（想想上面的内容）;）

Answer 7

IE6处理宽度为min-width：

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

如果你想让IE6像普通浏览器那样处理宽度，请给它一个溢出：可见; （不是这里的情况）

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

摘要

实施例

浏览器兼容性

7 个答案: