HTML 表格 - 最大宽度不适用于 td 后代
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12978619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Table - max-width not working on td descendants
提问by meustrus
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.
我有一个表，width: 100%该表中有一个元素，width: 40em; 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: 100%则应将其缩小以适应可用空间。这适用于表外。
Note that the max-widthis 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.
请注意，max-width不在桌子上。它实际上是在一个<input>元素上，尽管我链接的代码包含一个单独的表，在一个<span>元素上有相同的问题。它还包括<input>表外的一个行为正确的字段。
回答by Hashem Qolami
You should use table-layout: fixedfor the table element to get the max-widthproperties of <td>'s descendants to work.
您应该使用table-layout: fixedfor table 元素来使的后代的max-width属性<td>起作用。
From the MDN:
来自MDN：
The
table-layoutCSS property defines the algorithm to be used to layout the table cells, rows, and columns.fixedvalue:
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-layoutCSS属性定义算法要用于布局表单元格，行和列。固定值：
表格和列宽由表格和列元素的宽度或单元格第一行的宽度设置。后续行中的单元格不影响列宽。
table {
table-layout: fixed;
}
工作演示。
回答by Teena Thomas
if you put it on the element, the element gets stretched to max-width: 100%.
如果你把它放在元素上，元素会被拉伸到max-width: 100%。
If you want fixed width, use width: 40px(instead of %, percentages are used in liquid layouts)
如果您想要固定宽度，请使用width: 40px（而不是 %，在液体布局中使用百分比）
