在文本顶部创建一个文本装饰线，中间没有分割线答案

【问题标题】：Create a text-decoration-line on top of the text without a split in the middle在文本顶部创建一个文本装饰线，中间没有分割线
【发布时间】：2022-11-24 08:02:16
【问题描述】：

我有这个表格行，上面应该有一行，其大小与下面的文本相同。我想保持 tr 的原样，不做任何修改。

HTML

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

CSS

.right_align {
    text-align: right;
}
.horizontal_line_above{
    text-decoration-line: overline;
    text-decoration-color: blue;
    //border-top: 1px solid rgb(53, 52, 52);
}

到目前为止我已经尝试了两种方法 -

text-decoration-line 属性与上面的标题和值字段之间的拆分一起使用
border-top 属性在没有拆分的情况下工作，但超出了两侧的平铺和值字段的长度。

【问题讨论】：

<td class="right_align horizontal_line_above><b>title:</b></td> 你是不是在类名后面省略了"？
@DreamBold 不确定我明白你说的
它应该是<td class="right_align horizontal_line_above"><b>title:</b></td> 你省略了 class=".... 的 \" 字符。
@DreamBold 之前错漏了，现在补上。
您的问题有答案，是您需要的吗？您当前的代码如下所示codepen.io/dreambold/pen/OJZwgBm

标签： javascript html css

【解决方案1】：

.right_align {
    text-align: right;
}

table {
  border-collapse: collapse;
}

tr {
    border-top: 1px solid rgb(53, 52, 52);
}

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

【讨论】：