使用border-bottom像这样定义颜色编码

b {
    border-bottom: 1px solid red;
    padding: 0 0 4px;
}

<td><b>Grand Total</b></td>

您不能修改underline标记的宽度。请改用Border-bottom方法并根据需要更改其属性。

.underline {
  border-bottom: 5px solid red;
}

<table>
  <tr>
    <td><b class="underline">Grand Total</b></td>
  </tr>
</table>

还可以使用:before和:after等伪元素来控制下划线的长度

td {
  position: relative;
}

td:after {
  content: '';
  position: absolute;
  width: 100%;
  display: block;
  height: 5px;
  background-color: red;
  bottom: -5px;
}

<table>
  <tbody>
    <tr>
      <td><b>Grand Total</b></td>
    </tr>
  </tbody>
</table>

您应该为特定的行指定class或id，例如：
超文本：

<td><b id="total">Grand Total</b></td>

CSS：

#total {
  border-bottom: 1px solid red;
  padding: 0 0 4px;
}

从这里

td {
  color: red;
  text-decoration: underline;
}

span {
  color: black;
  text-decoration: none;
}

<table>
  <tr>
    <td><b><span>Grand Total</span></b></td>
  </tr>
</table>

如果你的目标是“b”，你可以使用背景渐变，这将允许你调整线条的粗细和线条的垂直位置。
例如

b {
    background-image: linear-gradient(to bottom, #fdb514 50%, transparent 50%);
    background-position: 0px 0.9em;
    background-repeat: repeat-x;
    background-size: 1px 15px;
    display: inline;
}

最好的方法是使用text-decoration-thickness css属性。下面是文档中的link。一个简单的代码示例如下所示：

text-decoration: underline solid black 2px;

这里的2px是text-decoration-thickness，或者更确切地说是下划线的宽度。

td {
position: relative;
}

td::after {
content: '';
position: absolute;
width: 30%;
display: block;
height: 5px;
background-color: red;
bottom: -5px;
}

要控制宽度，您只需将宽度从100%更改为您想要的任何值。

通常我使用这三个CSS属性来设置下划线的样式

设置下划线的粗细

文本-装饰-厚度：3像素;

设置下划线的颜色

文本-装饰-颜色：红色;

偏移下划线

文本下划线偏移：5像素;