如何让表格行内元素渲染到表格外部？Chrome兼容问题求解

针对你遇到的表格内.that-one元素在Chrome里无法溢出到表格外的问题，给你两个纯CSS的可行方案，都不需要修改表格结构、不用JS或伪元素，还能保留点击事件：

方案1：绝对定位 + 相对定位容器 #

给包含目标div的td设置相对定位，同时确保表格相关层级都开启溢出可见，然后让目标div绝对定位到表格外：

table, tbody, tr, td {
  overflow: visible;
}
tr.certain td:first-child {
  position: relative;
  /* 可根据需要调整，避免单元格内文本被溢出的div遮挡 */
  padding-left: 20px;
}
.that-one {
  position: absolute;
  left: -20px;
  top: 0;
  /* 自定义元素尺寸和样式 */
  width: 20px;
  height: 100%;
}

这个方案利用绝对定位脱离单元格的渲染限制，Chrome会尊重绝对定位元素的溢出规则，同时td的相对定位能让div的位置基于单元格对齐。

方案2：利用CSS contain 属性解除表格渲染限制 #

Chrome对表格的渲染优化会导致溢出被裁剪，给目标td添加contain: layout可以打破这种限制，配合你之前尝试的transform或负margin即可生效：

tr.certain td:first-child {
  contain: layout;
  overflow: visible;
}
.that-one {
  transform: translateX(-20px);
  /* 也可以替换为负margin：margin-left: -20px; */
}

contain: layout会让浏览器单独处理这个单元格的布局，不再受表格整体渲染规则的约束，这样transform或负margin就能在Chrome里正常生效了。

两个方案都能保留.that-one的点击事件，你可以根据自己的布局需求选择。

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