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

Question

摘要

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

例

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

浏览器兼容性

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

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

按优先顺序排列.

Answer 1

这个CSS应该足够了:

td { min-width: 100px; }

但是,所有浏览器并不总是正确地遵守(min-width属性)(例如,IE6不喜欢它).

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

然而,如果NOWRAP结合使用与常规小区width属性(例如,使用宽度:100像素)时,100像素将作用像的最小宽度和所述小区仍然将与文本膨胀(由于NOWRAP).这是一个不太理想的解决方案,无法使用CSS完全应用,因此,如果您希望将许多表应用于此,则实施起来会非常繁琐.(当然,如果你想在你的单元格中使用动态换行符,这整个替代解决方案都会失败).

Answer 2

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

Answer 3

我知道这是一个古老的问题,但我想我会分享一些未被提及的东西(虽然在概念上非常简单..)你可以把一个<div>放在桌子里面(在其中一个<td>或者什么中)然后设置<div>到min-width.桌子将停在<div>宽度处.只是想我会把它扔出去,万一有人在谷歌遇到这个.另外,我不太确定在I.E6中如何处理最小宽度.但这已经在另一个答案中得到了解释.