如何使 colspan 工作而不影响其他行的宽度

Question

我注意到所有列上都有 colspan 的td内容会影响其他行td的宽度。

谁能解释一下这是为什么以及如何让它正常工作？我有两个要求

• 第一行第二列应占用尽可能多的空间（展开）
• 第二行应采用 100% 宽度，在示例中使用 colspan=2

注意：我正在研究一些 CSS 属性，并发现word-break:break-all可以解决这个问题，但我想了解这个和/或有一个更好的解决方案。

这是带有较长文本的示例：

<table border="1">
  <colgroup>
    <col>
    <col style="width:100%">            
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
  </tr>
</table>

这里的结果是较短的文本，您可以看到第一行现在不同了。

<table border="1">
  <colgroup>
    <col>
    <col style="width:100%">            
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">shorter</td>
  </tr>
</table>

Answer 1

table也许是其中最奇怪的元素，并且具有跨浏览器的历史原因问题，我不能说为什么它在不同的浏览器中表现不同，它就是这样。

就您而言，在第一个上设置较小的宽度td将有助于解决您的问题。

table {
  width: 100%;
}

<table border="1">
  <colgroup>
    <col style="width:5%">
    <col style="width:95%">
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">looooooooooooooooooooooooooooooooooooooooooooooooong</td>
  </tr>
</table>

<table border="1">
  <colgroup>
    <col style="width:5%">
    <col style="width:95%">
  </colgroup>
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaa</td>
    <td>Take as much space as possible, expand</td>
  </tr>
  <tr>
    <td colspan="2">short</td>
  </tr>
</table>