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

问题描述

我有 width：100％的表格和 width：40em的表格中的元素。最大宽度：100％，但是当浏览器窗口太小时，元素仍然伸展。

我希望这个元素如果容器太小，应该是固定的宽度，但不能大于容器。如果没有足够的固定宽度空间， max-width：100％应该缩小以适应可用空间。这可以在表外使用。

请注意， max-width 不在表格本身。它实际上位于< input> 元素上，尽管我已经链接的代码包含一个单独的表，它在< span> ; 元素。它还包含一个< input> 字段，该字段在表格外的行为正确。

链接到jsfiddle

解决方案

您应该使用 table-layout：fixed 为表元素获取< td> max-width 属性



从 MDN ：
$ b

table-layout CSS属性定义要用于
的算法来布置表格单元格，行和列。

fixed value：

表和列宽度由表和列元素的宽度或第一行单元格的宽度设置。
后续行中的单元格不影响列宽。





  table {
 table-layout：fixed; 
} 
  

WORKING DEMO 。


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.

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.

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.

link to jsfiddle

解决方案

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

From the MDN:

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;
}

WORKING DEMO.

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