How to prevent table row with colspan from messing up the automatic size of other columns when its content is too long

I have a relatively straightforward html table, with rows that can be clicked to toggle the display of the row below them (used to display more details for the row above).

The "detail" row that is displayed/hidden on click has a colspan value set so that a single td spans all the columns.

The table takes 100% of the available horizontal space at all time.

I'm facing an issue that I do not understand: when the "detail" row content overflows on multiple lines, it triggers a change in the width of all the columns!

<html>
   <head>
      <title>asdf</title>
   </head>
   <body>
   <table>
      <thead>
         <tr>
            <th>AAA</th>
            <th>BBB</th>
            <th>CCC</th>
            <th>DDD</th>
            <th>EEE</th>
         </tr>
      </thead>
      <tbody>
         <tr onclick="document.getElementById('detail').hidden = !document.getElementById('detail').hidden" style="background-color:red">
            <td>asdfa</td>
            <td>dhfdh dfhd hfdfdh  fdh dhdhd</td>
            <td></td>
            <td></td>
            <td></td>
         </tr>
         <tr id="detail">
            <td colspan="5">
                ssssssss ssssssssssss ssssssssssssssssssss ssssssssssss sssssssssssss ssssssssssssss ssssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssssss sssssssssssssssssssss sssssssssssssss sssssssss ssssssssssssss sssssssssss ssssssssssssssssssssssss ssssssssss ssssss ssssssssssssssssssssssss sssssssssss ssssssssssss sssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssssssssss ssssssss sssssssssssss sssssssssssss ssssssssssssssssssss sssssssssssssssssssssssss sssssssssssssssssss ssssssss ssssssssssss ssssssssss ssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssss sssssssssssss sssssssssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssss sssssssssssssss ssssssssssss
            </td>
         </tr>
         <tr>
            <td>asdfasdf</td>
            <td>dgfhdh sdgdfdh</td>
            <td></td>
            <td></td>
            <td></td>
         </tr>
      </tbody>
   </table>
   </body>
</html>

https://jsfiddle.net/93dpowb5/ (click the red row to toggle the display of the "detail" row)

I managed to reproduce the issue in a jsfiddle. (tested on Firefox and Chrome)

I noticed that setting a max-width on the "detail" row fixes the issue (columns widths stay the same), but I would like to avoid doing that so the window can be resized normally.

I know about table-layout: fixed but I want my columns to be dynamically sized. I just want them to stay the same width once the layout is computed!

Basically I'm looking for an as-much-as-possible-non-hacky way to leave everything dynamically sized, while avoiding the jumpy columns when the "detail" row shows...

Solution

Hide div in tr:

body {
  overflow: scroll; /* just prevent jump */
}

table {
  width: 100%;
}

.hidden td {
  padding-top: 0;
  padding-bottom: 0;
}

.hidden div {
  height: 0;
  overflow: hidden;
}

<table>
  <thead>
    <tr>
      <th>AAA</th>
      <th>BBB</th>
      <th>CCC</th>
      <th>DDD</th>
      <th>EEE</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="detail.classList.toggle('hidden')" style="background-color:red">
      <td>asdfa</td>
      <td>dhfdh dfhd hfdfdh  fdh dhdhd</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr id="detail">
      <td colspan="5">
        <div>ssssssss ssssssssssss ssssssssssssssssssss ssssssssssss sssssssssssss ssssssssssssss ssssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssssss sssssssssssssssssssss sssssssssssssss sssssssss ssssssssssssss sssssssssss ssssssssssssssssssssssss ssssssssss ssssss ssssssssssssssssssssssss sssssssssss ssssssssssss sssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssssssssss ssssssss sssssssssssss sssssssssssss ssssssssssssssssssss sssssssssssssssssssssssss sssssssssssssssssss ssssssss ssssssssssss ssssssssss ssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssss sssssssssssss sssssssssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssss sssssssssssssss ssssssssssss</div>
      </td>
      </tr>
      <tr>
      <td>asdfasdf</td>
      <td>dgfhdh sdgdfdh</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>