首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在HTML或CSS中指定表格单元格的绝对最小宽度

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

Stack Overflow用户
提问于 2008-09-11 14:21:32
回答 7查看 85.3K关注 0票数 51

摘要

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

示例

我希望确保表格中所有单元格的宽度至少为100px。如果有更多可用空间,则表单元格应填充该空间。

浏览器兼容性

我可能想要找到一个在

FF 2-3

  • Safari

  • IE 6-8

按喜好顺序排列。

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2008-09-11 14:22:49

这个CSS应该足够了:

代码语言:javascript
复制
td { min-width: 100px; }

然而,并非所有浏览器都能正确遵守它(最小宽度属性)(例如,IE6非常不喜欢它)。

编辑:对于IE6 (以及之前的)解决方案,据我所知,没有一种在任何情况下都能可靠地工作。使用nowrap HTML属性并不能真正达到预期的效果,因为这只是防止了单元格中的换行,而不是指定最小宽度。

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

票数 62
EN

Stack Overflow用户

发布于 2008-09-11 14:31:14

另一个hack是旧的1x1透明像素技巧。插入1x1透明gif图像,并在image标签中将其宽度设置为所需的宽度。这将强制单元格至少与图像一样宽。

票数 9
EN

Stack Overflow用户

发布于 2011-08-29 11:37:21

我知道这是一个古老的问题,但我想我应该分享一些没有被提及的东西(尽管在概念上很简单……)你只需要在表格里面放一个<div> (放在一个<td>里或者别的什么地方),然后把<div>设为min-width。表格会停在<div>的宽度上。我想我还是把它扔出去,以防有人在谷歌上看到这个。另外,我也不太确定I.E6是如何处理最小宽度的。但这个问题已经在另一个答案中给出了。

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56658

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档