如何在HTML表格<tr>中跨多单元格绝对定位div并hover触发显示

首先修正你提供的表格结构，原代码里<td>的嵌套位置错误，正确结构需保证每个<tr>包裹对应的<td>：

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
    </tr>
  </tbody>
</table>

接下来通过CSS实现需求，核心是给<tr>设置相对定位作为绝对定位的容器，同时控制DIV的显示逻辑：

/* 给表格行设置相对定位，作为绝对定位元素的参照容器 */
tr {
  position: relative;
  line-height: 2.5em;
}

/* 定义跨单元格的绝对定位DIV */
tr .hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 123, 255, 0.1);
  border: 1px solid rgba(0, 123, 255, 0.3);
  /* 默认隐藏 */
  display: none;
  /* 确保DIV在单元格内容上方 */
  z-index: 10;
  cursor: pointer;
}

/* 鼠标悬停行时显示DIV */
tr:hover .hover-overlay {
  display: block;
}

/* 给单元格加内边距，避免内容被DIV遮挡 */
td {
  padding: 0 1em;
  border: 1px solid #eee;
}

最后在每个<tr>内部添加这个绝对定位的DIV（位置不影响表格布局，放在<td>前后均可）：

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tbody>
    <tr>
      <div class="hover-overlay"></div>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <div class="hover-overlay"></div>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
    <tr>
      <div class="hover-overlay"></div>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
    </tr>
  </tbody>
</table>

关键要点 #

• 相对定位的行：tr { position: relative; } 是核心，让内部绝对定位元素以当前行为基准，避免脱离布局上下文。
• 绝对定位的DIV：width: 100% 保证DIV覆盖整行所有单元格，top:0; left:0 对齐行的左上角。
• 悬停逻辑：通过tr:hover .hover-overlay触发显示，默认隐藏，鼠标移入时生效。
• 解决偏移问题：原问题的内容偏移大多是因为表格结构错误，或是未给行设置相对定位导致绝对定位元素脱离了正确的参照容器。

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