HTML表格 - 最大宽度不适用于td后代

时间:2012-10-19 16:36:11

标签: html css html-table

我有width: 100%的表和该表中带有width: 40em; max-width: 100%的元素,但是当浏览器窗口太小时,该元素仍在拉伸表。

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

请注意,max-width不在桌面上。它实际上位于<input>元素上,尽管我链接的代码包含一个在<span>元素上具有相同问题的单独表。它还包括表格外的<input>字段,其行为正确。

link to jsfiddle

2 个答案:

答案 0 :(得分:26)

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

来自MDN

  

table-layout CSS属性定义了要使用的算法   布置表格单元格,行和列。

     

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

table {
    table-layout: fixed;
}

<强> WORKING DEMO

答案 1 :(得分:2)

如果你把它放在元素上,元素会被拉伸到max-width: 100%

如果您想要固定宽度,请使用width: 40px(而不是%,百分比用于液体布局)