html - HTML 表格 - 最大宽度不适用于 td 后代

Question

我有一个带有的表格width: 100%和该表格中的一个元素width: 40em; max-width: 100%，但是当浏览器窗口变得太小时时，该元素仍在拉伸表格。

如果容器太小，我希望这个元素是固定宽度但不大于容器。如果固定宽度没有足够的空间，max-width: 100%应将其缩小以适应可用空间。这适用于桌子之外。

请注意，max-width它不在桌子上。它实际上是在一个<input>元素上，尽管我链接的代码包含一个单独的表，在<span>元素上存在相同的问题。它还包括<input>表外的一个行为正确的字段。

score 41 · Accepted Answer

您应该使用table-layout: fixed表元素来使的后代的max-width属性<td>起作用。

来自MDN：

table-layoutCSS 属性定义了用于布局表格单元格、行和列的算法。

固定值：
表格和列的宽度由表格和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。

table {
    table-layout: fixed;
}

score 2 · Accepted Answer

如果你把它放在元素上，元素会被拉伸到max-width: 100%.

如果您想要固定宽度，请使用width: 40px（而不是 %，在液体布局中使用百分比）

2 回答 2