HTML 表格 - 最大宽度不适用于 td 后代 [英] HTML Table - max-width not working on td descendants

问题描述

我有一个 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.

链接到 jsfiddle

推荐答案

你应该使用 table-layout: 固定表格元素获取max-width属性> 的后代工作.

You should use table-layout: fixed for the table element to get the max-width properties of <td>'s descendants to work.

来自 MDN:

table-layout CSS 属性定义了要用于布置表格单元格、行和列.

The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns.

固定值:
表格和列的宽度由表格和列元素的宽度或单元格第一行的宽度设置.细胞在后续行不影响列宽.

fixed value:
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;
}

工作演示.

这篇关于HTML 表格 - 最大宽度不适用于 td 后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！