我有width: 100%
的表和该表中带有width: 40em; max-width: 100%
的元素,但是当浏览器窗口太小时,该元素仍在拉伸表。
我希望这个元素是一个固定的宽度,但如果容器太小则不要大于容器。如果固定宽度没有足够的空间,max-width: 100%
应该使其更小以适应可用空间。这在桌子之外工作。
请注意,max-width
不在桌面上。它实际上位于<input>
元素上,尽管我链接的代码包含一个在<span>
元素上具有相同问题的单独表。它还包括表格外的<input>
字段,其行为正确。
答案 0 :(得分:26)
您应该使用table-layout: fixed
表元素来获取max-width
后代的<td>
属性。
来自MDN:
table-layout
CSS属性定义了要使用的算法 布置表格单元格,行和列。固定值:
表和列宽度由table和col元素的宽度或第一行单元格的宽度设置。细胞在 后续行不会影响列宽。
table {
table-layout: fixed;
}
<强> WORKING DEMO 强>
答案 1 :(得分:2)
如果你把它放在元素上,元素会被拉伸到max-width: 100%
。
如果您想要固定宽度,请使用width: 40px
(而不是%,百分比用于液体布局)