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

澄清：当视口比第一个表行窄时，表格是正确的（然后第二行的宽度与第一行相同）。

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

Answer 1

我在下面的例子中添加了一个类＆＃34; x＆＃34;到第二行中的td（colspan=5的那个）。我把它定义为

.x {
  max-width: 20px;
  }

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

＆＃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;

防止表格单元格扩大表格

1 个答案: