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

Question

很难解释，但通过 JSFiddle

更容易展示

我有一个 table 有 3 个单元格：

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

他们应该这样显示：

不幸的是，Microsoft edge 是这样显示的：

删除子元素（或其 width），一切又好了。

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

Answer 1

只需添加 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>

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

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

html

css

internet-explorer

html-table

microsoft-edge