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

2023年10月27日 196次阅读

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

任何人都可以解释一下为什么会这样,以及我如何正常工作？
我有两个要求

>第一行的第二列应占用尽可能多的空间(展开)
>第二行应采用100％宽度,在示例中使用colspan = 2

注意：我正在玩一些CSS属性,并想出了单词中断：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>

最佳答案 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>
点赞