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

Question

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

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

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

Answer 1

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

来自MDN:

的table-layoutCSS属性定义算法要用于布局表单元格,行和列.

固定值:
表和列宽度由table和col元素的宽度或第一行单元格的宽度设置.后续行中的单元格不会影响列宽.

table {
    table-layout: fixed;
}