摘要
确保表单元格不能小于某个最小宽度的最佳方法是什么?
示例
我希望确保表格中所有单元格的宽度至少为100px。如果有更多可用空间,则表单元格应填充该空间。
浏览器兼容性
我可能想要找到一个在
FF 2-3
按喜好顺序排列。
发布于 2008-09-11 14:22:49
这个CSS应该足够了:
td { min-width: 100px; }
然而,并非所有浏览器都能正确遵守它(最小宽度属性)(例如,IE6非常不喜欢它)。
编辑:对于IE6 (以及之前的)解决方案,据我所知,没有一种在任何情况下都能可靠地工作。使用nowrap HTML属性并不能真正达到预期的效果,因为这只是防止了单元格中的换行,而不是指定最小宽度。
但是,如果nowrap与常规的单元格宽度属性(如使用width: 100px)结合使用,则100px将表现为最小宽度,并且单元格仍将随文本一起扩展(由于nowrap)。这是一个不太理想的解决方案,不能使用CSS完全应用,因此,如果您有许多希望应用此解决方案的表,则实现起来会很单调乏味。(当然,如果您想在单元格中使用动态换行符,那么整个替代解决方案都会失败)。
发布于 2008-09-11 14:31:14
另一个hack是旧的1x1透明像素技巧。插入1x1透明gif图像,并在image标签中将其宽度设置为所需的宽度。这将强制单元格至少与图像一样宽。
发布于 2011-08-29 11:37:21
我知道这是一个古老的问题,但我想我应该分享一些没有被提及的东西(尽管在概念上很简单……)你只需要在表格里面放一个<div>
(放在一个<td>
里或者别的什么地方),然后把<div>
设为min-width
。表格会停在<div>
的宽度上。我想我还是把它扔出去,以防有人在谷歌上看到这个。另外,我也不太确定I.E6是如何处理最小宽度的。但这个问题已经在另一个答案中给出了。
https://stackoverflow.com/questions/56658
复制相似问题