How to fix Microsoft Edge displaying incorrect table cell widths when child element with defined width is within a cell with a colspan?

Pretty hard to explain, but easier to show via JSFiddle

I have a table with 3 cells:

  <table class="table">
    <tr>
      <td style="background:blue;width:60%;">Some text for 1st cell</td>
      <td style="width:40%;background:red;"></td>
    </tr>
    <tr>
      <td colspan="2" style="width:100%;background:yellow;"><div style="width:400px;">
      test
      </div></td>
    </tr>
  </table>

The table has a width of 100%:

.table {
  width:100%;
}

When a child element with a defined width is placed within the bottom cell which has a colspan, Microsoft Edge displays the incorrect widths for the top cells.

They should be showing like this:

Unfortunately, Microsoft edge is showing it like this:

Removing the child element (or its width) and everything is fine again.

How do I fix this problem? I need to keep the table widths as percentages and the child element as a fixed width.