问题描述
我有一个 width: 100%
的表格,该表格中有一个 width: 40em 的元素;max-width: 100%
,但是当浏览器窗口太小时元素仍然在拉伸表格.
I have table with width: 100%
and an element in that table with width: 40em; max-width: 100%
, but the element is still stretching the table when the browser window gets too small.
如果容器太小,我希望这个元素是一个固定的宽度但不大于容器.如果固定宽度没有足够的空间,max-width: 100%
应该使它更小以适应可用空间.这在表格外有效.
I want this element to be a fixed width but not be larger than the container if the container gets too small. If there's not enough room for the fixed width, max-width: 100%
should make it smaller to fit the available space. This works outside of a table.
请注意,max-width
不在桌子上.它实际上位于 元素上,尽管我链接的代码包含一个单独的表,在
元素上存在相同的问题.它还包括表外的
字段,其行为正确.
Note that the max-width
is not on the table itself. It is actually on an <input>
element, although the code I've linked includes a separate table with the same problem on a <span>
element. It also includes an <input>
field outside of the table which behaves correctly.
推荐答案
你应该使用 You should use 来自 MDN: 固定值: fixed value: 工作演示. 这篇关于HTML 表格 - 最大宽度不适用于 td 后代的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!table-layout: 固定
表格元素获取max-width属性> 的后代工作. table-layout: fixed
for the table element to get the max-width
properties of <td>
's descendants to work.table-layout
CSS 属性定义了要用于布置表格单元格、行和列.
表格和列的宽度由表格和列元素的宽度或单元格第一行的宽度设置.细胞在后续行不影响列宽.
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;
}