Why doesn't border-collapse work in html2pdf?

Question

I want to create a pdf with an html table like : tableEx

So, I created this html :

<table style="width: 100%; border:2px solid; border-collapse: collapse; padding: 0; margin: 0;">
    <tr style="border-bottom: 1px solid;">
        <th style="border-left: 1px solid; width: 60%;">Ref produit</th>
        <th style="border-left: 1px solid; width: 10%;">Taille</th>
        <th style="border-left: 1px solid; width: 10%;">Quantit�</th>
        <th style="border-left: 1px solid; width: 10%;">Prix net HT</th>
        <th style="border-left: 1px solid; width: 10%;">Montant HT</th>
    </tr>
    <tr>
        <td style="border-left: 1px solid;">BAL100</td>
        <td style="border-left: 1px solid; text-align: center;">S</td>
        <td style="border-left: 1px solid; text-align: center;">20</td>
        <td style="border-left: 1px solid; text-align: center;">22.00</td>
        <td style="border-left: 1px solid; text-align: center;">440</td> 
    </tr>
    <tr>
    .
    .
    .
    </tr>
</table>

The pdf result is:

enter image description here

The borders disappeared!

If I remove the property border-collapse: collapse; the borders appear but the result is not appropriate.

~~I see on the official forum (french post) that~~ the property border-collapse works only on the tag table. So I don't understand why my table is not generated properly.

Any idea?

Here is my php code to generate the pdf

$html2pdf = new HTML2PDF('P','A4','fr');
$html2pdf->WriteHTML($htmlContent);
$html2pdf->Output($path, 'F');

@AryehArmon On the bottom of my question there are 3 php lines, `$htmlContent` contain my html. I use the library html2pdf — R3tep, Apr 22 '15 at 12:43
i think it's due to your table width, try decreasing your table width by 90% or some thing. and give — Touqeer Shafi, Apr 23 '15 at 12:14

R3tep · Answer 1 · 2015-04-17T13:19:38.847

10

I found a workaround, if I replace the css property border-collapse: collapse; by cellspacing="0" the result looks OK.

<table cellspacing="0" style="width: 100%; border:2px solid;position: relative;">

edited Apr 17 '15 at 13:19

answered Apr 17 '15 at 07:55

R3tep

12,512
10
48
75

But I don't understand why `border-collapse` doesn't work, because it's in the css [compatibility list](http://www.studentenwerk-goettingen.de/pdf/help/compatibility.css.2.1.html). – R3tep Apr 17 '15 at 13:19
1

web.archive link for compat list: https://web.archive.org/web/http://www.studentenwerk-goettingen.de/pdf/help/compatibility.css.2.1.html – Phillmac Feb 18 '20 at 03:11
How it should works without `color`? Unfortunately, your solution not works for me. My solution is to create div wrapper over text with `border: 1px solid black` and add border to td: `padding: 5px` – Ivan Tikhonov Dec 28 '22 at 10:04
@IvanTikhonov The default color of `border` is black – R3tep Jan 04 '23 at 09:49

score 6 · Accepted Answer · answered Apr 23 '15 at 18:55

border-collapse: collapse; is supposed to merge two of the same, adjacent borders together. When using it in html2pdf, you should style both the border-left and border-right attributes (as the same thing), which when collapsed will produce a single border. Also, to write this CSS defensively, and not assume the border-color attribute inheritance, you should technically specify it when defining border, such as border: 1px solid black;

Why doesn't border-collapse work in html2pdf?

2 Answers2

Linked