每行表上的 Mpdf 底部边框

Posted

技术标签:

【中文标题】每行表上的 Mpdf 底部边框【英文标题】:MPdf botton border on every row table 【发布时间】:2016-09-26 18:50:15 【问题描述】:

我正在制作一个 Wordpress 模块来预订房间。 现在我使用 mPDF 自动创建预订合同。

mPDF 在创建每行都有边框线的表格时存在问题。 当我创建表格并在 html 中查看它时,一切看起来都很好。但是当我使用 mPDF 创建 PDF 时,不会显示行底部边框。

这是我用来生成 pdf 的 html 代码:

.logo

    display: inline-block;
    width: 130;
    height: 146;
    align: left;
    hspace: 12;


.headerText

    display:inline-block;
    text-align: right;
    float:right;


.header
    padding-bottom: 20px;


.table
    border-left: thin solid;
    border-right: thin solid;
    border-bottom: thin solid #000000;
    border-top: thin solid;


.table
    margin-top: 10px;
    margin-bottom: 10px;
    border-collapse: collapse;


table tr 
    border-bottom: 1px solid black;


table tr:last-child  
    border-bottom: none; 


.Cell


    width: 300px;


.firstCell

    border-left: thin;
    border-right: thin solid;
    border-bottom: thin;
    border-top: thin;


.smallCell

    width:150px;


.largeCell

    width: 450px;


.row

    display: block;


.koninklijkeLogo

    width: 30px;


.maxSize

    width: 600px;
        <table class="table">
            <tr class="row">
                <td class="smallCell firstCell">Naam:</td>
                <td class="largeCell">%name%</td>
            </tr>
            <tr class="row">
                <td class="smallCell firstCell">Adres:</td>
                <td class="largeCell">%adres%</td>
            </tr>
            <tr class="row">
                <td class="smallCell firstCell">Telefoonnummer:</td>
                <td class="largeCell">%phone%</td>
            </tr>
            <tr class="row">
                <td class="smallCell firstCell">E-mailadres:</td>
                <td class="largeCell">%mail%</td>
            </tr>
        </table>

我可以通过更改我的一些代码来解决问题吗?或者这是 mPDF 中的错误?

【问题讨论】:

【参考方案1】:

从this document 开始,最新版本的mPDF(版本6)似乎支持tr 元素的边框。

    您使用的是最新版本吗?

    也许您可以尝试仅对单元格而不是行应用底部边框? (只要确保没有表格单元格间距或td 单元格边距,否则您会在边框中看到间隙)。

【讨论】:

唯一的解决方案是第二种,虽然在文档中说它受支持

以上是关于每行表上的 Mpdf 底部边框的主要内容,如果未能解决你的问题,请参考以下文章

在 MPDF 中将文本与底部对齐

html5 视频元素 1px chrome 上的白色底部边框

悬停时的线性渐变底部边框

神秘的底部边框

从下到上的动画边框颜色变化?

Android底表上的静态页脚视图