mpdf 上的跨度宽度和浮点数不起作用答案

【问题标题】：span width and float on mpdf doesn't workmpdf 上的跨度宽度和浮点数不起作用
【发布时间】：2021-11-28 00:42:57
【问题描述】：

我正在使用 mpdf 库开发报告 html。我的代码是：

..
<td style="width:400px">
<span style="float:left; width:60px;">Rp</span>
<span style="float:right; width:340px;">100</span>
</td>
..

我希望它在左侧显示“Rp”，在右侧显示“100”，在浏览器中，它显示了我想要的完美结果，但是当生成为 pdf 时，它们都在左侧。并且跨度的宽度不正确。为什么这不起作用？

请有人帮助我，谢谢。

【问题讨论】：

标签： html mpdf

【解决方案1】：

尝试使用“percent”而不是“px”：

HTML：

<table>
    <tr>
        <td>
            <span>Rp</span>
            <span>100</span>
        </td>
        <td>
            second TD
        </td>
    </tr>
</table>

CSS：

table{
    width: 100%;
    border: 1px solid red;
}

td {
    width: 400px;
}

td span{
    float: left;
    border: 1px solid green;
    width: 20%;
    margin-right: 10px;
}

td span:nth-child(2){
    border: 1px solid blue;
    width: 60%;
}

演示：http://jsfiddle.net/R5KW6/1/

【讨论】：

在其他论坛上说 MPDF 不支持 td/table 中的块元素..也许我会尝试只使用表格视图..
似乎确实如此，即使在没有表格的浮动 div 时也是如此，但我不知道为什么。 Px 适用于其他样式，但在浮动上使用时默认为 100%

【解决方案2】：

如果你想用mpdf在一些数据和<span>之间留出空间，或者你也可以使用实体，例如：

<span>&nbsp;YOUR TEXT HERE</span>

&nbsp - adds real non-breaking space

【讨论】：