How can I add a dotted line between two texts with HTML2PDF

Question

I'm trying to create a pricing recap at the end of a document I'm working on. I would like it to have a dotted line between the item on the left and the price on its right, very much like this :

However, this Index is generated with the createIndex function and I don't have the source HTML for this. And I've been trying since yesterday with differente HTML syntaxes to make it work but it is impossible. My best attempt so far is this one, but I can't automatically set the width of the dotted line :

<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>

I really am stuck here, any advice would be welcome.

Answer 1

In this case you can use a little 'hack'. Unset the width of both texts (resolves to width: auto;) and set the width of the dotted line container to width: 99%;. For this to work you also need to set white-space: nowrap on the text elements, but you already did that.

<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>