为<tr>设置position:absolute后，如何保持<td>的宽高不变？

给表格行(<tr>)设置position: absolute后，该行宽度会收缩为<td>元素内容的宽度。需要让<td>及其父元素保持设置position: absolute之前的宽高，以此实现表格行的平滑移除动画。

当前问题：Joe Swanson所在行本应与下方Cleveland Brown行完全重合、单元格宽高一致，但实际收缩至内容最小宽度，尝试多种CSS类均未生效。

示例代码 #

CSS #

table, td, th {
  border: 1px solid black;
}

table {
  width: 100%;
}
tr {
  height: 90px;
}

.full-width {
  width: 100%;
}

HTML #

<h3>仅设置absolute定位时的效果</h3>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr style="position: absolute">
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

<br/>
<h3>使用额外CSS后的理想效果近似</h3>
<p>
理想状态下，该行应<strong>保留设置"position: absolute"之前的尺寸</strong>，使其与HTML中下方的行对齐并<strong>完全重叠</strong>。
</p>
<p>
看起来我需要找到列中最长的字符串，模拟其宽度并使用"display: table"来实现，还可能需要覆盖部分表格默认CSS，但不确定具体方法。
</p>
<table class="full-width">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr
  class="full-width"
  style="position: absolute; display: table;">
    <td>Cleveland</td>
    <td>Lastname</td>
    <td>Savings</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

解决方法 #

元素设置position: absolute后会脱离表格布局流，不再继承表格列宽规则，要保留原尺寸需手动同步宽高信息，以下是两种可行方案：

方案1：JS动态同步单元格尺寸 #

在给目标行设置position: absolute前，先获取该行每个<td>的宽度，再赋值给定位后的<td>，同时设置行宽为表格宽度：

// 获取目标行和表格
const targetTr = document.querySelector('tr[style="position: absolute"]');
const table = targetTr.closest('table');

// 记录原td宽度
const tds = targetTr.querySelectorAll('td');
const tdWidths = Array.from(tds).map(td => td.offsetWidth);

// 设置absolute定位及宽高
targetTr.style.position = 'absolute';
targetTr.style.width = `${table.offsetWidth}px`;
tds.forEach((td, index) => {
  td.style.width = `${tdWidths[index]}px`;
});

方案2：克隆行实现平滑动画 #

适合移除动画场景，避免直接修改原行导致布局跳动：

1. 克隆目标行，给克隆元素设置position: absolute并同步原行的位置、尺寸
2. 将克隆行插入表格（需给表格加position: relative），覆盖原行
3. 对克隆行执行动画，结束后清理元素并隐藏原行

const targetTr = document.querySelector('tr:nth-child(3)');
const table = targetTr.closest('table');
const rect = targetTr.getBoundingClientRect();
const tableRect = table.getBoundingClientRect();

// 克隆行并设置定位与尺寸
const clonedTr = targetTr.cloneNode(true);
clonedTr.style.position = 'absolute';
clonedTr.style.top = `${rect.top - tableRect.top}px`;
clonedTr.style.left = `${rect.left - tableRect.left}px`;
clonedTr.style.width = `${rect.width}px`;

// 同步单元格宽度
const originalTds = targetTr.querySelectorAll('td');
const clonedTds = clonedTr.querySelectorAll('td');
originalTds.forEach((td, i) => {
  clonedTds[i].style.width = `${td.offsetWidth}px`;
});

// 插入克隆行并执行动画
table.style.position = 'relative';
table.appendChild(clonedTr);

clonedTr.style.transition = 'all 0.5s ease';
setTimeout(() => {
  clonedTr.style.opacity = '0';
  clonedTr.style.transform = 'translateY(-20px)';
}, 100);

// 动画结束后清理
clonedTr.addEventListener('transitionend', () => {
  clonedTr.remove();
  targetTr.style.display = 'none';
});

补充说明 #

• 纯CSS无法实现动态表格列宽的同步，因为表格列宽由内容和父容器共同决定，无固定值可直接继承
• 给表格设置position: relative，可让绝对定位的行相对于表格定位，避免偏移到页面其他位置

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