Почему border-radius не работает в tcpdf и как вывести текст в одну строку?

Question

Я использую tcpdf, и мне нужно отобразить круг, а текст должен быть в одном файле в формате PDF. Я пробовал код ниже, ноborder-radius не работает

Я получаю результат ниже

Мой ожидаемый результат

Это код, который я использую

$html='<table width="100%" border="0" cellpadding="20px">
            <tr>
            <td><p><div style="width:15px;height:15px;background-color:#58d68d;border-radius:50px;margin-right:05px;"></div> Demo1</p></td>
            <td><p><div style="width:15px;height:15px;background-color:#f5b041;border-radius:50px;margin-right:05px"></div> Demo2</p></td>
            <td><p><div style="width:15px;height:15px;background-color:#e74c3c;border-radius:50px;margin-right:05px"></div> Demo3</p></td>
            </tr>
        </table>';

Answer 1

Вам нужно только изменить радиус границы: 50px -> 50%;

<table width="100%" border="0" cellpadding="20px">
        <tr>
        <td><p><div style="width:15px;height:15px;background-color:#58d68d;border-radius:50%;margin-right:05px;"></div> Demo1</p></td>
        <td><p><div style="width:15px;height:15px;background-color:#f5b041;border-radius:50%;margin-right:05px"></div> Demo2</p></td>
        <td><p><div style="width:15px;height:15px;background-color:#e74c3c;border-radius:50%;margin-right:05px"></div> Demo3</p></td>
        </tr>
    </table>

Answer 2

Если я правильно понимаю, вы хотите, чтобы тексты "Демо" были в каждом цветном разделе? Если да, примите во внимание следующие изменения:

<table width="100%" border="0" cellpadding="20px">
<tr>
    <td><span style="width:15px;height:15px;background-color:#58d68d;border-radius:50px;margin-right:05px;padding:2em;"> Demo1</span></td>
    <td><span style="width:15px;height:15px;background-color:#f5b041;border-radius:50px;margin-right:05px;padding:2em;">Demo2</span></td>
    <td><span style="width:15px;height:15px;background-color:#e74c3c;border-radius:50px;margin-right:05px;padding:2em;">Demo3</span></td>
</tr>
</table>

удалять <p> а также <div> и замените его на <span>, затем настройте количество отступов вокруг каждого текста, используя padding.