Как я могу добавить пунктирную линию между двумя текстами с HTML2PDF - PullRequest
Новая
       58

Как я могу добавить пунктирную линию между двумя текстами с HTML2PDF

2 голосов
/ 22 марта 2019

Я пытаюсь создать резюме цены в конце документа, над которым я работаю. Мне бы хотелось, чтобы пунктирная линия между товаром слева и ценой справа была очень похожа на это: Summary example

Однако этот индекс создается с помощью функции 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>

Я действительно застрял здесь, любой совет будет приветствоваться.

1 Ответ

3 голосов
/ 30 марта 2019

В этом случае вы можете использовать небольшой хак. Удалите ширину обоих текстов (разрешается в 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>
...