我有宽度为100%的表格,该表格中的元素为宽度:40em; max-width:100%,但是当浏览器窗口太小时,该元素仍然伸展表.
我想要这个元素是一个固定的宽度,但不要大于容器如果容器太小.如果固定宽度没有足够的空间,max-width:100%应该使其更小以适应可用空间.这在桌子外面工作.
请注意,最大宽度不在表本身.它实际上是在< input>元素,尽管我链接的代码包含一个单独的表,在< span>上具有相同的问题.元件.它还包括< input>字段表外的行为正确.
解决方法
您应该使用
table-layout: fixed
表格元素来获取< td>的后代的max-width属性.
从MDN:
The
table-layout
CSS property defines the algorithm to be used to@H_301_18@ layout the table cells,rows,and columns.fixed value:@H_301_18@ 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@H_301_18@ subsequent rows do not affect column widths.
table { table-layout: fixed; }