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

Question

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.

Answer 1

just add table-layout:fixed

fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.

.wrap {
  width: 500px
}
.table {
  width: 100%;
  table-layout: fixed
}
.cell1 {
  background: blue;
  width: 60%
}
.cell2 {
  background: red;
  width: 40%
}
.cell3 {
  background: yellow;
  width: 100%
}
.cell3 div {
  width: 400px
}

<div class="wrap">
  <table class="table">
    <tr>
      <td class="cell1">Some text for 1st cell</td>
      <td class="cell2"></td>
    </tr>
    <tr>
      <td colspan="2" class="cell3">
        <div>
          test
        </div>
      </td>
    </tr>
  </table>
</div>