Collapsed borders not drawn for tables in margin boxes

I made a complex document in it and I’m putting header and footer in @ top-center and @ top-bottom. The problem is that I use a simple 1-row table. On the first page everything is ok, on the second onwards ONLY the border does not work is borderless the rest everything is ok. This only occurs in the header and footer in the rest of the document is ok

First page:

Second one:

Code:

<div class="header">
        <table style="border-collapse: collapse; width: 100%; height: 84px;">
            <tbody class="bodyHeader">
                <tr style="height: 21px;">
                    <td style="width: 12.1754%; height: 21px; background-color: cornflowerblue;" rowspan="4">&nbsp;</td>
                    <td style="width: 64.5104%; height: 21px;" rowspan="2">&nbsp;</td>
                    <td style="width: 19.905%; height: 21px;">&nbsp;</td>
                </tr>
                <tr style="height: 21px;">
                    <td style="width: 19.905%; height: 21px;">&nbsp;</td>
                </tr>
                <tr style="height: 21px;">
                    <td style="width: 64.5104%; height: 21px;" rowspan="2">&nbsp;</td>
                    <td style="width: 19.905%; height: 21px;">&nbsp;</td>
                </tr>
                <tr style="height: 21px;">
                    <td style="width: 19.905%; height: 21px;">&nbsp;</td>
                </tr>
            </tbody>
        </table>
        
    </div>

div.header {
            /* display: block; */
            width: 100%;
            position: running(header);
            margin: 0mm;
            padding: 0mm;
        }
        @page iretrato{
            size: A4;
            margin: 2cm;
            margin-top: 3.5cm;

            @top-center {
                vertical-align: top;
                margin: 0mm;
                padding-top: 1cm;
                content: element(header);
                width: 100%;
            }

            @bottom-center {
                content: element(footer);
            }    
        }

[usamec]

The good workaround involves using div tags instead of tables. I.e:

                <div style="display: table">                                                                                  
                    <div style="display: table-row">                                                                                                                        
                        <div style="display: table-cell; padding-right: 20px">A</div>                                         
                        <div style="display: table-cell">A</div>                                                                                                            
                    </div>                                                                                                    
                    <div style="display: table-row">                                                                                                                        
                        <div style="display: table-cell; border-top: 1px solid; padding-right: 20px">BBB</div>                
                        <div style="display: table-cell; border-top: 1px solid">CCCCC</div>                                                                                 
                    </div>                                                                                                                                                  
                </div> 

Divs do not use border-collapse property and do not have this problem.

[liZe]

Ok, i found why this happening, its border-collapse: collapse.

Thanks a lot for taking the time to find this!

I dont know if this is a bug because only shows border on first page but my problem is solved removing this param.

It definitely is, let’s keep this issue open.