Why doesn't border-collapse work in html2pdf?

Question

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

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:

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');

Exhaust

Have you tried to set border color? i.e. 1px solid black – Undoing

how are you creating the pdf from the html? – Society

@AryehArmon On the bottom of my question there are 3 php lines, $htmlContent contain my html. I use the library html2pdf – Exhaust

what version of html2pdf are you using? – Argyle

@Argyle html2pdf => 4.03 and tcpdf => 4.0.014 – Exhaust

i think it's due to your table width, try decreasing your table width by 90% or some thing. and give <table border="1"> – Goines

@TouqeerShafi Same result. – Exhaust

Answer 1

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;

Hockenberry

Answer 2

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;">

Exhaust

But I don't understand why border-collapse doesn't work, because it's in the css compatibility list. – Exhaust

web.archive link for compat list: web.archive.org/web/http://www.studentenwerk-goettingen.de/pdf/… – Embouchure

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 – Transcend

@IvanTikhonov The default color of border is black – Exhaust

Answer 3

As @andrewgu suggested, I set border for every th/td, but only top, right and left borders to make border thinner. As result I had the following css:

table {
    border-collapse: collapse;

    tr {
        &:last-child {
            td,
            th {
                border-bottom: 1px solid black;
            }
        }

        th {
            background-color: lightgrey;
        }

        td,
        th {
            border-top: 1px solid black;
            border-left: 1px solid black;

            &:last-child {
                border-right: 1px solid black;
            }
        }
    }
}

My problem was some shaded cells cover top border which was set for tr. CSS above solved this and all borders are visible.

Diseuse