51

概括

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

例子

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

浏览器兼容性

我可能想找到一个适用的解决方案

  • 即 6-8
  • 法阵2-3
  • 苹果浏览器

按优先顺序。

4

7 回答 7

62

这个 CSS 应该足够了：

td { min-width: 100px; }

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

编辑：至于 IE6（及之前）的解决方案，据我所知，没有一个在所有情况下都能可靠工作的解决方案。使用 nowrap HTML 属性并不能真正达到预期的效果，因为这只是防止单元格中的换行符，而不是指定最小宽度。

但是，如果 nowrap 与常规单元格宽度属性一起使用（例如使用 width: 100px），则 100px 将起到最小宽度的作用，并且单元格仍会随文本扩展（由于 nowrap）。这是一个不太理想的解决方案，它不能使用 CSS 完全应用，因此，如果您有很多表要应用它，实现起来会很乏味。（当然，如果您想在单元格中使用动态换行符，那么整个替代解决方案都会失败）。

于 2008-09-11T14:22:49.317 回答
9

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

于 2008-09-11T14:31:13.637 回答
6

我知道这是一个老问题，但我想我会分享一些没有提到的东西（虽然概念上很简单..）你可以把 a<div>放在桌子里面（在<td>'s 或其他东西中）并设置<div>到min-width. 表格将停在<div>'s 宽度处。只是想我会把它扔在那里，以防有人在谷歌上遇到这个问题。另外，我不太确定在 I.E6 中如何处理 min-width 。但这已经包含在另一个答案中。

于 2011-08-29T03:37:20.953 回答
4

我取得了一些成功：

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

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

于 2009-06-17T15:59:11.360 回答
2

这个css属性怎么样

min-width: 100px

但如果没记错的话，它在 IE6 中并不真正起作用

如果你不想用css的方式做，我想你可以添加这个属性

nowrap="nowrap"

在您的表格数据标签中

于 2008-09-11T14:23:51.983 回答
2

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

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

IE 6 不理解！重要
IE 6 看到宽度/高度：200px（覆盖自动）

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

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

顺便提一句：

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

由于前两行的顺序，这不起作用，它们需要按正确的顺序排列（考虑以上内容）；）

于 2011-02-23T22:27:56.370 回答
0

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

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

如果你想让 IE6 像普通浏览器一样处理宽度，给它一个 overflow:visible; （这里不是这样）

于 2008-09-11T14:45:54.893 回答