Webkit浏览器中跨行列搭配折叠行的Overflow失效问题求助

嘿，这个问题我太熟了——Webkit内核的浏览器（Chrome、Safari这些）在处理带rowspan的单元格，同时又有设置visibility: collapse的行时，确实会出现这种文本溢出滚动失效的bug，Firefox因为布局逻辑不同就没这问题。我整理了两个靠谱的解决办法：

方案1：将滚动与宽度限制转移到内部容器 #

核心思路是把原本加在<td>上的宽度限制和滚动逻辑，移到单元格内部的独立容器里，让表格自己处理rowspan的空间计算，避开Webkit的bug：

table { border-collapse: collapse; border: 1px solid black; }
tr { height: 20px; }
td { height: 20px; vertical-align: top; border: 1px solid black; }
.collapsed { visibility: collapse; }
.table-wrapper { height: 300px; overflow: scroll; }
.cell-scroll-container { 
  max-width: 100px; 
  white-space: nowrap; 
  overflow-x: auto; 
  display: inline-block; /* 确保容器能正确应用滚动规则 */
}

对应的HTML修改示例：

<div class="table-wrapper">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td rowspan="2">
          <div class="cell-scroll-container">Very long sentence that should scroll instead of getting truncated</div>
        </td>
      </tr>
      <tr class="row2 collapsed"><td>2</td></tr>
      <!-- 其余行按同样方式修改 -->
    </tbody>
  </table>
</div>

方案2：用模拟效果替代visibility: collapse #

既然Webkit对visibility: collapse+rowspan的组合处理有问题，我们可以用其他CSS属性模拟行折叠的视觉效果，同时不破坏表格的布局计算：

table { border-collapse: collapse; border: 1px solid black; }
tr { height: 20px; }
td { max-width: 100px; height: 20px; vertical-align: top; white-space: nowrap; border: 1px solid black; overflow-x: auto; }
/* 模拟折叠行的效果 */
.collapsed { 
  height: 0 !important; 
  line-height: 0;
  overflow: hidden;
}
.collapsed td {
  padding: 0;
  border: none;
}
.table-wrapper { height: 300px; overflow: scroll; }

这个方法不需要修改HTML结构，只需要替换visibility: collapse的CSS规则，就能让单元格的溢出滚动正常工作。

问题根源回顾 #

正如你查到的，这是Webkit的一个已知特性：当行设置visibility: collapse时，浏览器会错误地缩减rowspan单元格的可用宽度，导致内部文本被截断而不是触发滚动。position: absolute虽然能突破宽度限制，但会脱离表格布局流，滚动时自然会出现位置偏移；而position: relative不会改变单元格的布局计算逻辑，所以还是会被截断。Firefox的布局引擎对这种场景的处理更符合预期，因此没有这个问题。

内容的提问来源于stack exchange，提问作者Buszmen