HTML表 – 最大宽度不能在td后代工作

我有宽度为100%的表格,该表格中的元素为宽度:40em; max-width:100%,但是当浏览器窗口太小时,该元素仍然伸展表.

我想要这个元素是一个固定的宽度,但不要大于容器如果容器太小.如果固定宽度没有足够的空间,max-width:100%应该使其更小以适应可用空间.这在桌子外面工作.

请注意,最大宽度不在表本身.它实际上是在< input>元素,尽管我链接代码包含一个单独的表,在< span>上具有相同的问题.元件.它还包括< input>字段表外的行为正确.

link to jsfiddle

解决方法

您应该使用 table-layout: fixed表格元素来获取< td>的后代的max-width属性.

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.

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...