如何在表格文本上方添加无中断顶线且不修改表格行？

要实现给表格行内的文本上方添加与文本长度完全匹配的顶线，同时不修改<tr>原有结构，可参考以下两种方案：

方案1：纯CSS调整（无需改动HTML） #

通过width: fit-content让单元格宽度自适应文本长度，配合margin-left: auto保持右对齐，再用border-top生成顶线：

.right_align {
    text-align: right;
}
.horizontal_line_above {
    width: fit-content;
    margin-left: auto; /* 确保文本保持右对齐 */
    border-top: 1px solid blue;
    padding-top: 4px; /* 避免顶线和文本重叠，可按需调整间距 */
}

方案2：添加内联容器（兼容旧浏览器） #

如果需要兼容不支持fit-content的老浏览器，可在<td>里的文本外包裹一个<span>，给这个<span>加顶线（<tr>结构完全不变）：

调整后的HTML #

<tr>
   <td class="right_align horizontal_line_above"><span><b>title:</b></span></td>
   <td class="right_align horizontal_line_above"><span>${value}</span></td>
</tr>

对应CSS #

.right_align {
    text-align: right;
}
.horizontal_line_above span {
    display: inline-block;
    border-top: 1px solid blue;
    padding-top: 4px; /* 调整间距避免重叠 */
}

这两种方案都不会改动<tr>的原有结构，顶线宽度完全匹配文本长度，解决了你之前遇到的顶线中断或超出文本范围的问题。

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