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

Question

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

任何人都可以请解释我为什么这是，我如何才能正常工作？ 我有两个要求

• 第一行的第二列应尽可能多的空间可能的（展开）
• 第二行应取100％的宽度，在例如使用列跨度= 2

注意：我正在玩弄一些CSS属性，并计算出word-break：打破所有将解决此问题，但我想了解这一个和/或有一个更好的解决方案。

这里是一个较长的文本的例子：

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