即使内容过大，也可以固定 HTML 表格单元格的大小吗？

Question

即使内容过大，也可以固定 HTML 表格单元格的大小吗？

htmlcss

5

我想使用HTML创建一个图表。我使用了一个带有固定列宽的表格。一切看起来都很好，但是如果单元格的内容太长，列宽会被扩展。我希望即使某些内容被隐藏，列宽仍然保持不变。

有没有办法做到这一点？

- Noam

可能是重复的问题：CSS：如何设置表格列宽度，无论其单元格中的文本量如何都保持恒定？ - Ciro Santilli OurBigBook.com

3个回答

4

除了@barrylloyd的回答之外，我建议还使用以下方法:

td,th {
  min-width: 3em; /* the normal 'fixed' width */
  width: 3em; /* the normal 'fixed' width */
  max-width: 3em; /* the normal 'fixed' width, to stop the cells expanding */
}

min-width可能是不必要的，但它涵盖了所有基础知识。

- David Thomas

非常感谢！overflow: hidden 和 max-width: 1em 的组合解决了问题！ - Noam

1

如何使用CSS来解决它：

td { overflow: hidden; }

应该足够了。

- g.d.d.c

我不相信 td 标签会遵守 overflow 属性。 - founddrama

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- barrylloyd · Accepted Answer

尝试在你的样式表中添加以下代码：

table {table-layout: fixed}

这将强制浏览器使用固定表格布局算法...

固定表格布局算法：

水平布局仅取决于表格的宽度和列的宽度，而不是单元格的内容

比自动表格布局更快地使浏览器布局表格

浏览器可以在接收到第一行后开始显示表格

(参见http://www.w3schools.com/Css/pr_tab_table-layout.asp)