HTML表 – 最大宽度不能在td后代工作

我有宽度为100％的表格,该表格中的元素为宽度：40em; max-width：100％,但是当浏览器窗口太小时,该元素仍然伸展表.

我想要这个元素是一个固定的宽度,但不要大于容器如果容器太小.如果固定宽度没有足够的空间,max-width：100％应该使其更小以适应可用空间.这在桌子外面工作.

请注意,最大宽度不在表本身.它实际上是在< input>元素,尽管我链接的代码包含一个单独的表,在< span>上具有相同的问题.元件.它还包括< input>字段表外的行为正确.

link to jsfiddle

解决方法

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

从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.