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

标签 html css html-table

总结

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

例子

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

浏览器兼容性

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

  • IE 6-8
  • FF 2-3
  • Safari

按优先顺序排列。

最佳答案

这个 CSS 应该足够了:

td { min-width: 100px; }

但是,并非所有浏览器都始终正确遵守它(min-width 属性)(例如,IE6 非常不喜欢它)。

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

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

关于html - 如何在 HTML 或 CSS 中指定表格单元格的绝对最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56658/

相关文章:

html - 缩小图像并保持纵横比

html - 高度根据屏幕尺寸变化

javascript - 向所选段落添加类(contenteditable div)

html - 使元素等于最宽的列和中心

php - 在 PHP MySQL 中每 30 分钟在表中插入空行以分隔时间

html - 如何将 ng2-dnd 应用于背景图像?

jquery - 无法在 Bootstrap 容器中居中 jssor slider

java - 引入struts2标签后表单未正确对齐

c# - ASP.NET MVC 3 : Editor templates for fields

html - 为什么表格布局是: fixed affecting the width of the parent element?