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

本文介绍了如何使colspan工作而不影响其他行的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I noticed that the content of a td with a colspan over all columns affects the width of the other rows td.

任何人都可以向我解释为什么会这样以及如何使它正常工作吗?我有两个要求

Can anyone please explain me why this is and how I can get this working properly? I have two requirements

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

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

Note: I was playing around with some CSS properties and figured out word-break:break-all would fix the issue, but I would like to understand this one and/or have a better solution.

下面是带有较长文本的示例:

Here is the example with a longer text:

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

在这里，文本较短的结果，您现在可以看到第一行有所不同.

And here the result with a shorter text, you can see the first row is different now.

<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 is maybe the most odd element of them all and has historical cause issues cross browser and I can't say why it behaves different in different browser, it just does.

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

In your case, setting a small width on the first td will help solve your issue.

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>