html2pdf - 如何使用 HTML2PDF 在两个文本之间添加虚线

Question

我正在尝试在我正在处理的文档的末尾创建一个定价回顾。我希望它在左边的项目和右边的价格之间有一条虚线，非常像这样：

但是，这个索引是用 createIndex 函数生成的，我没有这个的源 HTML。从昨天开始，我一直在尝试使用不同的 HTML 语法来使其工作，但这是不可能的。到目前为止，我最好的尝试是这个，但我无法自动设置虚线的宽度：

<table style="width:100%;border-collapse: collapse;">
    <tr>
        <td style="width:40%;white-space:nowrap;">Item 1</td>
        <td style="border-bottom:dotted 1px black;width:45%;"></td>
        <td style="text-align:right;width:15%;white-space:nowrap;">Price 1€ HT</td>
    </tr>
</table>

我真的被困在这里，欢迎任何建议。

Answer 1

在这种情况下，您可以使用一点“hack”。取消设置两个文本的宽度（解析为width: auto;）并将虚线容器的宽度设置为width: 99%;。为此，您还需要设置white-space: nowrap文本元素，但您已经这样做了。

<table style="width:100%;border-collapse: collapse;">
    <tr>
        <td style="white-space:nowrap;">Item 1</td>
        <td style="border-bottom:dotted 1px black;width:99%"></td>
        <td style="text-align:right;white-space:nowrap;">Price 1€ HT</td>
    </tr>
</table>