当具有已定义宽度的子元素位于具有colspan的单元格内时,如何修复Microsoft Edge显示不正确的表格单元格宽度？

Question

很难解释,但更容易通过JSFiddle显示

我有table3个细胞:

  <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>

在table拥有width的100%:

.table {
  width:100%;
}

当具有已定义的子元素width放置在具有a的底部单元格内时colspan,Microsoft Edge将显示width顶部单元格的不正确s.

他们应该这样显示:

不幸的是,微软边缘显示如下:

删除子元素(或它width),一切都很好.

我该如何解决这个问题？我需要将table宽度保持为百分比,将子元素保持为固定width.

Answer 1

加上 table-layout:fixed

固定

表和列宽度由table和col元素的宽度或第一行单元格的宽度设置.后续行中的单元格不会影响列宽.

在"固定"布局方法下,可以在下载和分析第一个表行后呈现整个表.这可以加快"自动"布局方法的渲染时间,但后续单元格内容可能不适合所提供的列宽.具有溢出内容的任何单元格都使用overflow属性来确定是否剪切溢出内容.

.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>