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

Question

我有一个表 width: 100%以及该表中的元素 width: 40em; max-width: 100% , 但当浏览器窗口太小时，该元素仍在拉伸(stretch)表格。

我希望这个元素的宽度固定，但如果容器太小则不能大于容器。如果固定宽度没有足够的空间，max-width: 100%应该使它更小以适应可用空间。这适用于表格之外。

请注意 max-width不在 table 上。它实际上在 <input> 上元素，虽然我链接的代码包括一个单独的表，在 <span> 上有同样的问题。元素。它还包括一个 <input>行为正确的表外字段。

link to jsfiddle

Answer 1

你应该使用 table-layout: fixed 为表元素获取 max-width <td> 的属性的后代去工作。

来自MDN :

The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns.

fixed value:
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

table {
    table-layout: fixed;
}

WORKING DEMO .