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

Question

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

我有一个包含3个单元格的table ：

  <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的子元素放置在具有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>