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 p

Solution 1:

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>