HTML表格最后一行添加子行使用span标签行高不生效如何解决

你当前出现行高无法自适应的核心原因是，给承载驳回理由的span设置了position: absolute，绝对定位元素会脱离正常文档流，父级<td>和<tr>计算高度时不会把该元素的尺寸纳入统计，自然不会跟随内容撑开高度。

方案1：移除绝对定位，改造当前结构（改造成本最低） #

直接把驳回理由放在正常文档流中，添加上边框实现分割线效果，高度会自动适配内容，修改后代码参考：

<tr>
    <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>
        <!-- 移除绝对定位，添加上边框样式替代hr -->
        <div style="border-top: 1px solid #eee; margin-top: 8px; padding-top: 8px;">
            Motif de rejet : Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
        </div>
    </td>
</tr>

方案2：用rowspan实现语义化独立子行（结构更规范） #

如果需要视觉上完全是独立子行的效果，可以通过单元格跨行属性实现，适配性更强：

<tr>
    <!-- 前面6个td设置跨行2行 -->
    <td class="semi-bold" rowspan="2">2017</td>
    <td class="semi-bold" rowspan="2">
        Montant principal : 700,00<br>
        Pénalité : 0<br>
        Majoration de retard : 100
    </td>
    <td class="semi-bold" rowspan="2">Peugeot</td>
    <td class="semi-bold" rowspan="2">000000B1</td>
    <td class="semi-bold" rowspan="2">8 CV</td>
    <td class="semi-bold" rowspan="2">800,00</td>
    <td class="semi-bold">
        <span class="state">
            <i class="state-suspended"></i>Rejeté
        </span>
    </td>
</tr>
<tr>
    <!-- 新增子行，只有最后一个td，其他位置被上面的跨行单元格占用 -->
    <td>
        Motif de rejet : Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
    </td>
</tr>

实现效果参考：

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