防止表格单元格扩大表格

时间:2016-10-11 12:12:58

标签: html css

我有这张桌子:

<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

澄清:当视口比第一个表行窄时,表格是正确的(然后第二行的宽度与第一行相同)。

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

1 个答案:

答案 0 :(得分:1)

我在下面的例子中添加了一个类&#34; x&#34;到第二行中的tdcolspan=5的那个)。我把它定义为

.x {
  max-width: 20px;
  }

这样做你想要的:它保持表格的宽度与它上面的其他5个单元格一样宽(约240px):

&#13;
&#13;
.x {
  max-width: 20px;
  }
&#13;
<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>
&#13;
&#13;
&#13;