Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table well displayed in html but not in the pdf generated with mpdf

Tags:

html

php

mpdf

I am trying to generate a PDF in PHP using mPDF. A part of my document must be like this:
(source: cloudandfun.com)

So I wrote for the HTML:

<table style = "width:100%">
<tr>
    <td>Appellation <br>(par ordre de préférence)</td>
    <td style = "border:0px;">
        <table style = "width:100%; border:0px;">
            <tr style = "border:0px;"><th style = "border:0px;">Abréviation (S’il y a lieu)</th></tr>
        </table>
        <table style = "width:100%;border:0px;">
            <tr style = " border:0px;">
                <td style = "width:33%;border-bottom:0px;border-left:0px;">Abréviation</td>
                <td style = "width:33%;border-bottom:0px;border-left:0px;">Facultative</td>
                <td style = "width:33%;border-bottom:0px;border-left:0px;border-right:0px;">Obligatoire</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>1.</td>
    <td>
        <table style = "width:100%;border:0px;">
            <tr style = " border:0px;">
                <td style = "width:33%;border-bottom:0px;border-left:0px;border-top:0px;">--</td>
                <td style = "width:33%;border-bottom:0px;border-left:0px;border-top:0px;">--</td>
                <td style = "width:33%;border:0px;">--</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>2.</td>
    <td>
        <table style = "width:100%;border:0px;">
            <tr style = " border:0px;">
                <td style = "width:33%;border-bottom:0px;border-left:0px;border-top:0px;">--</td>
                <td style = "width:33%;border-bottom:0px;border-left:0px;border-top:0px;">--</td>
                <td style = "width:33%;border:0px;">--</td>
            </tr>
        </table>
    </td>
</tr>

My CSS:

th,td,tr {
  border:1px solid black;
  border-collapse:collapse;
}

table {
  border:2px solid black;
  border-collapse:collapse;
}

td {
  font-family:Arial;
  font-size:11px;
}

In the html page, it works great, but when the pdf is generated, it appears like this:
(source: cloudandfun.com)

Does anyone have a solution for that? Thanks in advance.

like image 312
zakariag Avatar asked May 24 '14 18:05

zakariag


1 Answers

I've got the solution, instead of giving % I gave the width with px and it worked. Conclusion: mPDF doesn't support % (width:33%; for my example) but supports px (width:100px; for my example). ;) ;)

like image 124
zakariag Avatar answered Nov 15 '22 10:11

zakariag