Chrome中border-collapse与position:relative共存时box-shadow失效问题求助

我有一个包含数据的<table>，出于样式需求设置了border-collapse: collapse，其中的<td>元素设置了position: relative，用于通过子元素<div>（设position: absolute）实现tooltip功能。但在Chrome浏览器中，<td>的box-shadow无法生效，移除border-collapse或position: relative则恢复正常，而该效果在Firefox中可正常显示。需要在保留这两个属性的前提下解决此问题。

示例代码1：基础复现 #

table {
  border-collapse: collapse;
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
}

<table>
  <tr>
    <td>This has a shadow in Firefox but not in Chrome</td>
  </tr>
</table>

示例代码2：tooltip功能依赖position:relative #

移除position: relative会破坏tooltip的定位：

table {
  border-collapse: collapse;
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
  border: 1px solid black;
}

div {
  visibility: hidden;
  position: absolute;
  background-color: #ff5555;
  z-index: 1000;
  right: 0;
  top: 100%;
  padding: 5px;
  border: 1px solid black;
}

td:hover>div {
  visibility: visible;
}

<table>
  <tr>
    <td>Hover your mouse cursor here
      <div>tooltip</div>
    </td>
  </tr>
  <tr>
    <td>Shadow is missing in Chrome</td>
  </tr>
</table>

解决方案 #

方法1：用伪元素承载阴影 #

利用伪元素脱离表格布局限制，既保留border-collapse和position: relative，又能显示阴影：

table {
  border-collapse: collapse;
}

td {
  position: relative;
  border: 1px solid black;
  padding: 8px; /* 保持原有的内边距 */
}

/* 伪元素实现阴影，放在td内容下方 */
td::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 10px black;
  z-index: -1;
}

/* tooltip样式保持不变 */
div {
  visibility: hidden;
  position: absolute;
  background-color: #ff5555;
  z-index: 1000;
  right: 0;
  top: 100%;
  padding: 5px;
  border: 1px solid black;
}

td:hover>div {
  visibility: visible;
}

方法2：用border-spacing模拟border-collapse #

如果可以接受用border-spacing替代border-collapse，也能解决问题，同时保留tooltip功能：

table {
  border-collapse: separate; /* 切换为separate模式 */
  border-spacing: 0; /* 模拟边框合并效果 */
}

td {
  position: relative;
  box-shadow: 0 0 10px black;
  border: 1px solid black;
  /* 去掉重复边框 */
  border-right: none;
  border-bottom: none;
  padding: 8px;
}

/* 补全最后一列和最后一行的边框 */
td:last-child {
  border-right: 1px solid black;
}

tr:last-child td {
  border-bottom: 1px solid black;
}

/* tooltip样式不变 */
div {
  visibility: hidden;
  position: absolute;
  background-color: #ff5555;
  z-index: 1000;
  right: 0;
  top: 100%;
  padding: 5px;
  border: 1px solid black;
}

td:hover>div {
  visibility: visible;
}

方法3：给内部套容器元素 #

把td的内容放到内部容器中，让容器承载阴影，td保持position: relative用于tooltip定位：

table {
  border-collapse: collapse;
}

td {
  position: relative;
  padding: 0; /* 内边距移到内部容器 */
  border: 1px solid black;
}

/* 内部容器承载阴影和内边距 */
td .content {
  box-shadow: 0 0 10px black;
  padding: 8px;
}

/* tooltip样式不变，注意类名区分 */
div.tooltip {
  visibility: hidden;
  position: absolute;
  background-color: #ff5555;
  z-index: 1000;
  right: 0;
  top: 100%;
  padding: 5px;
  border: 1px solid black;
}

td:hover>.tooltip {
  visibility: visible;
}

对应的HTML修改为：

<table>
  <tr>
    <td>
      <div class="content">Hover your mouse cursor here</div>
      <div class="tooltip">tooltip</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="content">Shadow now shows in Chrome</div>
    </td>
  </tr>
</table>

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