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

Posted 2023-03-05

【中文标题】当具有定义宽度的子元素位于具有 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?

【发布时间】：2016-06-22 10:18:23

【问题描述】：

很难解释，但通过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 会为顶部单元格显示不正确的 widths。

它们应该是这样显示的：

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

删除子元素（或其width），一切都恢复正常了。

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

【参考方案1】：

只需添加table-layout:fixed

固定

表格和列的宽度由表格和列的宽度设置 元素或第一行单元格的宽度。细胞在 后续行不影响列宽。

在“固定”布局方式下，整个表格可以渲染一次 第一个表格行已被下载并分析。这可以加速 与“自动”布局方法相比，渲染时间增加，但随后 单元格内容可能不适合提供的列宽。任何细胞 有溢出的内容使用溢出属性来确定 是否裁剪溢出内容。

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

【讨论】：

table-layout:fixed 正是我需要的！

这个解决方案不能满足我的要求。我明确不想要fixed 布局，因为我的列的大小都是一样的，我想像auto 那样保持基于内容的相对大小。此行为在除 Edge 之外的所有浏览器中都能完美运行。

@MaxGhost 我也有同样的问题。你有想过解决办法吗？

@Dave 是的。显然，需要在列中的每个 td 上设置宽度，而不仅仅是标题。至少这是我的解决办法。

@MaxGhost 我确实做到了，但它似乎不适用于百分比宽度。但是像素值确实有效。