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 回答