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

Question

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

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

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

link to jsfiddle

Answer 1

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

来自MDN：

  

table-layout CSS属性定义了要使用的算法   布置表格单元格，行和列。

     

固定值：
  表和列宽度由table和col元素的宽度或第一行单元格的宽度设置。细胞在   后续行不会影响列宽。

table {
    table-layout: fixed;
}

<强> WORKING DEMO

Answer 2

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

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