Html 如何在网页上排列可变长度的下划线行？

我正在使用TCPDF显示一些表数据。为此，我使用HTML+CSS，然后将其转换为PDF格式。我想在我的桌子上画下划线，人们可以在上面写笔记。我目前使用下划线字符

\uu

来画这些线。我似乎遇到的问题是，它们的右侧是锯齿状的（见下面的夸张图片）。

我正在寻找一种不让线条参差不齐的方法。实际上，我可以使它们不那么锯齿状，但由于字体的宽度不固定，即使我添加/删除下划线字符以使它们对齐，它们仍然会出现一些锯齿状

我正在寻找下划线与表/div/container右边框对齐的任何合理解决方案。这可以通过任何方式完成（使用chars或CSS，或者甚至是图像），只要事情安排得当。在我的例子中，容器是

words\uuuuuuuuuu

大概是这样的：

注意/更新：

---

不幸的是，在尝试了下面的答案之后，我发现TCPDF在CSS标记方面并不是很健壮，也不是很宽容，而CSS标记比基本标记稍多一些。下面的解决方案在浏览器上工作时，似乎在HTML+CSS到{PDF-through-TCPDF}转换器中无法生存。鉴于TCPDF开发的现状，我不确定是否有可能找到解决方案，至少对于免费版本是这样。目前我可能不得不坚持使用不均匀下划线字符。

在没有看到现有标记的情况下，很难给您提供好的建议，但希望这将为您指明正确的方向：。基本上，我们有一条全宽的线来伪装下划线，然后我们的文本有一个白色背景来掩盖它下面的线

HTML示例：

<p><span>Text</span></p>
<p><span>Longer text</span></p>
<p><span>Even longer text</span></p>

---

这里有一个解决方案，它使用

底部边框

来实现下划线

.container {
    width: 400px;
    background-color: purple;
    color: white;
    padding: 1rem;
}

p {
    border-bottom: solid white 1px;
}

span {
    border-bottom: solid purple 3px;
    padding-right: 1rem;
}

及

问题

问题是什么

有问题的东西asdf asdf asdf

它产生以下输出：

---

我突然想到

也许我可以改变我的设计，而不是专注于使线条一致。i、 e.使用类似Excel表格的表格

 _________________
|_words__|________|  <-- empty cells instead 
|_words2_|________|      of underlines

_________________
|_这个问题缺乏明确的问题陈述。您是真的想使用下划线字符序列，还是希望能很好地呈现表格？在后一种情况下，您应该考虑使用单元格之间的边框而不是下划线字符技巧。展示一些实际的HTML和CSS代码会有所帮助，特别是如果附带一个结果与您想要的不同的描述。不幸的是，我输入的CSS/HTML是通过一些专有软件运行的（它被翻译成PDF），但该软件不能正确地呈现底部边框。我现在可能不得不坚持使用下划线。但我学到了一些很酷的东西！
<div class="container">
    <p><span>Question thingy</span></p>
    <p><span>Question thingy asdf </span></p>
    <p><span>Question thingy asdf asdf asdf  </span></p>
</div>

 _________________
|_words__|________|  <-- empty cells instead 
|_words2_|________|      of underlines