html - 为什么 max-width 在表中的列上会直观地表现出反作用？

Question

基本上，我有一个可伸缩的表格，我希望我的标签列是固定宽度，我的数据列是动态大小的。我的倾向是max-width在我的标签列上设置 via CSS。但是，这会产生相反的效果。我创建了一个复制这个的 jsfiddle。（重新调整窗口大小以查看左列动态大小和右列固定大小）

在我自己的网站上，我看到了相同的行为，它发生在 IE 和 Chrome 中。

如果我切换它并max-width在 data column 上进行设置，一切都会按照我的意愿行事，但对我来说却是一种倒退。我在这里做错了吗？

Answer 1

使用 chrome 开发人员工具从数据列中删除 max-width 不会影响它。该类的该列中不需要它。因为表格是 100% 宽度，现在只有您的标签列设置了保持其大小的宽度。所以我猜它的工作原理？

Answer 2

在桌子上设置宽度总是有点……奇怪。“宽度”实际上大部分时间都被认为是“最小宽度”，因为最初“最小宽度”并不存在。

table-layout:fixed但是现在，您可以通过添加到其 CSS来强制表格自行运行。

现在您还有另一个问题：此表格布局采用第一行中单元格的宽度，并将它们用于整个表格。

因此，您可以<colgroup>在表的第一行之前添加一个。这允许您设置有限数量的样式，但最重要的是width. 我从未尝试过使用max-width，但我想它可能会很好用。不过，使用百分比宽度可能会更安全。