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上设置较小的宽度将有助于解决您的问题。

＆＃13;

table {
  width: 100%;
}

＆＃13;

<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>

＆＃13;

如何在不影响其他行的宽度的情况下使colspan工作

1 个答案: