如何使用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>