当具有定义宽度的子元素位于带有colspan的单元格内时，如何解决Microsoft Edge显示不正确的表格单元格宽度的问题? [英] How to fix Microsoft Edge displaying incorrect table cell widths when child element with defined width is within a cell with a colspan?

问题描述

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

Pretty hard to explain, but easier to show via JSFiddle

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

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>

table的width为100％:

.table {
  width:100%;
}

将具有定义的width的子元素放置在具有colspan的底部单元格中时，Microsoft Edge会为顶部单元格显示不正确的width.

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.

他们应该像这样显示:

不幸的是，Microsoft edge像这样显示它:

Unfortunately, Microsoft edge is showing it like this:

删除子元素(或其width)，一切都很好.

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

如何解决此问题?我需要将table宽度保持为百分比，将子元素保持为固定的width.

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

推荐答案

只需添加 table-layout: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显示不正确的表格单元格宽度的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！