CODEWITHSUNDEEP
htmlcss
chris1069603
chris1069603

Reputation: 443

How to make colspan work without affecting width of the other rows

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

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>

Upvotes: 5

Views: 3614

Answers (1)

Asons
Asons

Reputation: 87191

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.

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>

Upvotes: 2

Related Questions