html - 为什么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

你只需要改变border-radius: 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。