如何使colspan工作而不影响其他行的宽度 [英] How to make colspan work without affecting width of the other rows

问题描述

我注意到 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>

这篇关于如何使colspan工作而不影响其他行的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！