Table missing Border(s) after auto pagebreak, using CSS

Question

I have a table that has 13 columns with some merged. The header and footer is static and the tbody is dynamic produced by an echo of a variable from a php page.

All is well including the borders except when I try to print them, either PDF or sent to the printer itself. the print out is good on the first page but after the page break all the table borders are missing, the layouts etc are good.

I have found a temporary solution but is somehow of a cheat. all i did was to set the border-collapse to separate and cell spacing to 0. if you look at the table borders are there but the other half of the collapse border is still missing, I have thinker with the pagebreak-after, before and inside with no avail. when table border is set to collapse the border is completely gone after the page break.

Answer 1

Firefox is known to have this issue. Refer to this for a possible solution. It is suggesting that you explicitly draw your borders like so:

CSS:

table {
    border-spacing:0;
}
td, th {
    border-right:1px solid black;
    border-bottom:1px solid black;
}
thead th {
    border-top:1px solid black;
}
th:first-child, td:first-child {
    border-left:1px solid black;
}