表格中绝对定位行覆盖对应行时的宽度与对齐问题求助

我现在碰到一个表格布局的棘手问题：我需要实现表格里的隐藏行在 hover 时显示，并且完全覆盖在上方的可见行上，同时每个 <td> 元素的位置要和可见行完全对齐。但当我给隐藏行加上绝对定位后，它的宽度直接缩水了，没法和原行匹配；就算加了 width:100%，单元格的位置还是对不上。

我做了好几个测试案例来复现这个问题，下面是我的完整代码：

CSS 代码 #

hr {margin-block: 5rem}
table { 
  border-collapse: collapse; 
  width: 70%; 
  margin-inline: auto; 
}
tbody { 
  position: relative; 
}
td { 
  padding: 15px 
}
.visible-line { 
  background: deeppink; 
  z-index: 1; 
}
.invisible-line { 
  background: plum; 
  z-index: 10; 
}
.visible-line:hover+.invisible-line.display-none, 
.invisible-line.display-none:hover { 
  display: table-row; 
  inset: 0; 
  background: LavenderBlush; 
}
.display-none { 
  display: none 
}
.position-absolute { 
  position: absolute; 
}
.full-width { 
  width: 100% 
}

HTML 代码 #

<table>
  <caption>Hover example</caption>
  <tbody>
    <tr class="visible-line">
      <td>03/06/2025</td>
      <td>John Doe</td>
      <td>Doctor</td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="invisible-line">
      <td><input type="date"/></td>
      <td><input type="text" /></td>
      <td><select>
        <option>Doctor</option>
        <option>Writer</option>
      </select></td>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>
<hr/>
<table>
  <caption>tr with absolute positioning</caption>
  <tbody>
    <tr class="visible-line">
      <td>03/06/2025</td>
      <td>John Doe</td>
      <td>Doctor</td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="invisible-line position-absolute">
      <td><input type="date"/></td>
      <td><input type="text" /></td>
      <td><select>
        <option>Doctor</option>
        <option>Writer</option>
      </select></td>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>
<hr/>
<table>
  <caption>tr with absolute positioning & full width</caption>
  <tbody>
    <tr class="visible-line">
      <td>03/06/2025</td>
      <td>John Doe</td>
      <td>Doctor</td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="invisible-line position-absolute full-width">
      <td><input type="date"/></td>
      <td><input type="text" /></td>
      <td><select>
        <option>Doctor</option>
        <option>Writer</option>
      </select></td>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>
<hr/>
<table>
  <caption>tr by default appearing with mouse on the first tr</caption>
  <tbody>
    <tr class="visible-line">
      <td>03/06/2025</td>
      <td>John Doe</td>
      <td>Doctor</td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="invisible-line display-none">
      <td><input type="date"/></td>
      <td><input type="text" /></td>
      <td><select>
        <option>Doctor</option>
        <option>Writer</option>
      </select></td>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>
<hr/>
<table>
  <caption>tr with absolute positioning appearing with mouse on the first tr</caption>
  <tbody>
    <tr class="visible-line">
      <td>03/06/2025</td>
      <td>John Doe</td>
      <td>Doctor</td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="invisible-line display-none position-absolute">
      <td><input type="date"/></td>
      <td><input type="text" /></td>
      <td><select>
        <option>Doctor</option>
        <option>Writer</option>
      </select></td>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>
<hr/>
<table>
  <caption>tr with absolute positioning and full width appearing with mouse on the first tr</caption>
  <tbody>
    <tr class="visible-line">
      <td>03/06/2025</td>
      <td>John Doe</td>
      <td>Doctor</td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="invisible-line display-none position-absolute full-width">
      <td><input type="date"/></td>
      <td><input type="text" /></td>
      <td><select>
        <option>Doctor</option>
        <option>Writer</option>
      </select></td>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>

问题分析 #

核心问题在于：绝对定位的 <tr> 会脱离表格的布局流，表格默认的自动列宽规则对它不再生效。就算给行设置了 width:100%，里面的 <td> 也不会自动匹配原表格列的宽度，因为它不再是表格布局的一部分了。

可行的解决方案 #

这里给你一个不用大幅重构HTML的解决思路：

1. 给表格设置固定布局，让列宽确定下来
2. 给每个 <td> 设置统一的宽度（根据列数均分）
3. 让绝对定位的隐藏行保持表格行的布局特性

修改后的关键CSS代码：

table {
  border-collapse: collapse;
  width: 70%;
  margin-inline: auto;
  table-layout: fixed; /* 开启固定布局，列宽由设置的宽度决定 */
}
td {
  padding: 15px;
  width: 25%; /* 4列均分，根据实际列数调整 */
  box-sizing: border-box; /* 确保内边距不会撑宽单元格 */
}
.invisible-line.position-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: table-row; /* 保持表格行的布局，让td继承列宽 */
}

这样修改后，绝对定位的隐藏行就能完美覆盖在可见行上，每个单元格的位置也能完全对齐了。我还没开始重构HTML，想先看看有没有更简单的CSS层面的解决办法，麻烦各位大佬帮忙看看~

内容来源于stack exchange