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%;
}

<tableborder="1"><colgroup><colstyle="width:5%"><colstyle="width:95%"></colgroup><tr><td>aaaaaaaaaaaaaaaaaaaaaa</td><td>Take as much space as possible, expand</td></tr><tr><tdcolspan="2">looooooooooooooooooooooooooooooooooooooooooooooooong</td></tr></table><tableborder="1"><colgroup><colstyle="width:5%"><colstyle="width:95%"></colgroup><tr><td>aaaaaaaaaaaaaaaaaaaaaa</td><td>Take as much space as possible, expand</td></tr><tr><tdcolspan="2">short</td></tr></table>