html - 防止表格单元格使表格变宽

Question

我有这张表:

<table>
<tr>
<td>Important</td><td>Content</td><td>of</td><td>dynamic</td><td>length</td>
</tr>
<tr>
<td colspan=5>This is a help text that should not make the table wider than the above row would ordinarily do. I want to wrap the text and just take as many lines as needed</td>
</tr>
</table>

是否有可能确保第二行永远不会导致表格比只有第一行的表格变得更宽(除非是极长的单词，这是可以接受的)？

最好没有 JS。

JSFiddle

说明:当视口(viewport)比表格的第一行窄时表格是正确的(然后第二行的宽度与第一行的宽度相等)。

我想要的是表格始终看起来像那样，即使视口(viewport)比那样宽。 (目前它在大屏幕上将表格扩展到荒谬的比例)

Answer 1

在我下面的示例中，我在第二行(带有 colspan=5 的那个)的 td 中添加了一个类“x”。我把它定义为

.x {
  max-width: 20px;
  }

这会做你想做的事:它使表格的宽度与其上方的其他 5 个单元格一样宽(大约 240 像素):

.x {
  max-width: 20px;
  }

<table>
<tr>
<td>Important</td><td>Content</td><td>of</td><td>dynamic</td><td>length</td>
</tr>
<tr>
<td class="x" colspan=5>This is a help text that should not make the table wider than the above row would ordinarily do. I want to wrap the text and just take as many lines as needed</td>
</tr>
</table>