使用::after伪类为表格行添加子行时如何调整tr高度适配内容

问题根源 #

你的现有写法存在两个核心问题：

• <tr>属于表格原生布局元素，多数浏览器默认不支持给tr设置position: relative，你给tr加的相对定位规则实际不生效，伪类的绝对定位基准会出错，直接导致布局错位
• 绝对定位的元素默认脱离正常文档流，本身不会参与父元素的高度计算，无论伪类内容多高，都不会撑开tr的高度

解决方案 #

方案1：保留伪类实现，调整CSS规则

如果不想改动HTML结构，按以下方式调整样式即可：

.reject {
    /* 让tr支持相对定位，可根据实际表格布局替换为display: block，保证宽度占满100%即可 */
    display: table-row-group;
    position: relative;
    /* 底部预留出伪类内容需要的高度，数值根据你实际伪类内容高度调整 */
    padding-bottom: 30px;
}
.reject::after {
    content: "你要展示的子行内容";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #000;
    padding: 4px 12px; /* 自行调整内边距适配内容 */
    line-height: 22px; /* 控制伪类内容高度 */
    /* 移除之前的margin规则，避免宽度溢出表格 */
    margin: 0;
}

注意：如果调整display属性后出现表格列宽错位的问题，建议使用方案2

方案2：修改HTML结构，新增独立子行（兼容性最好，无布局隐患）

直接在当前.reject行的下方新增一个tr，用colspan属性占满所有表格列，完全不存在高度适配问题，也不会破坏原有表格的列宽布局：

<!-- 原有tr代码不变 -->
<tr class="reject">
 <td class="semi-bold">2017</td>
    <td class="semi-bold">Montant principal : 700,00<br>
        Pénalité : 0<br>
        Majoration de retard : 100</td>
    <td class="semi-bold">Peugeot</td>
    <td class="semi-bold">000000B1</td>
    <td class="semi-bold">8 CV</td>
    <td class="semi-bold">800,00</td>
    <td class="semi-bold">
      <span class="state">
       <i class="state-suspended"></i>Rejeté
      </span>
    </td>
</tr>
<!-- 新增子行 -->
<tr class="reject-sub">
    <td colspan="7">
        你要展示的子行内容
    </td>
</tr>

之后单独给.reject-sub写样式即可。

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