如何设置绝对定位div相对于table的td定位并覆盖指定单元格

需要实现：根据给定的单元格索引，让指定行内的.msg div从行首扩展到目标单元格（比如索引3时覆盖0到3的单元格），每行包含5个数据单元格（加上行头共6个单元格）。现有代码无法正确实现该效果，请问如何调整？

核心思路是利用目标单元格的右侧位置确定.msg的宽度边界，同时修复原代码中元素获取和样式设置的问题：

1. 修正HTML结构 #

确保.msg标签闭合正确，避免DOM结构错误：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
    <tr>
      <th scope="col">F#</th>
      <th scope="col">Second</th>
      <th scope="col">Third</th>
      <th scope="col">Forth</th>
      <th scope="col">Fifth</th>
      <th scope="col">Last</th>
    </tr>
    <tr>
      <th scope="row">row 1 <div class="msg"></div></th>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
    </tr>
    <tr>
      <th scope="row">row 2 <div class="msg"></div></th>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
    </tr>
    <tr>
      <th scope="row">row 3 <div class="msg hidden">My target is to cover until cell 3</div></th>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
      <td>cell 4</td>
      <td>cell 5</td>
    </tr>    
</table>
<button class="btn btn-primary" onClick="chosenCell(3, 3)"> Do It @ row 3 and cell 3</button>

2. 调整CSS样式 #

给.msg设置自适应宽度，通过right属性控制右侧边界，同时提升层级确保覆盖效果：

tr{
  position: relative;
}
.msg{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100%; /* 默认收缩在行头内 */
  width: auto;
  background-color: rgba(0, 128, 0, 0.7); /* 半透明绿色，保留下方内容可见性 */
  z-index: 10; /* 确保覆盖在单元格上方 */
}
.hidden{
  visibility: hidden;
}

3. 修改JavaScript逻辑 #

通过getBoundingClientRect()获取准确的位置信息，计算目标单元格相对于父行的右侧偏移量，设置给.msg：

const table = document.querySelector('table');
const rows = table.rows;

function chosenCell(rowIndex, cellIndex) {
  const row = rows[rowIndex];
  const targetCell = row.cells[cellIndex];
  const msg = row.cells[0].querySelector('.msg');
  
  // 获取行和目标单元格的位置尺寸信息
  const rowRect = row.getBoundingClientRect();
  const cellRect = targetCell.getBoundingClientRect();
  
  // 计算目标单元格右侧到行右侧的距离，作为.msg的right值
  const rightOffset = rowRect.width - (cellRect.right - rowRect.left);
  
  // 显示.msg并设置边界
  msg.classList.remove('hidden');
  msg.style.right = `${rightOffset}px`;
}

关键说明 #

• getBoundingClientRect()可以精准获取元素的视口位置和尺寸，不受CSS定位影响
• 半透明背景色既实现覆盖效果，又不会完全遮挡下方单元格内容
• 修复了原代码中直接读取cell.style.right的错误（目标单元格未设置行内right样式，无法直接获取）

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