Header overlaps content after second page and page margins also affects my fixed header while printing

I've one summary page to print which contains table with 100+ rows.

I've fixed header and footer.

This is my html page looks like:

       #header{
        position: fixed;
        right: 0;
        top: 0;
        left: 0;
    }
    
    #footer{
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
    }
   
   @media print {
        table {
            page-break-after: auto;
        }
    
        tr {
            page-break-inside: avoid;
            page-break-after: auto;
        }
    
        td {
            page-break-inside: avoid;
            page-break-after: auto;
        }
    
        th {
            page-break-inside: avoid;
            page-break-after: auto;
        }
    
        thead {
            display: table-header-group;
        }
    
        tfoot {
            display: table-footer-group;
        }
    
    }

 <html>
    <body>
        <div id="header">...</div>
        <div id="footer">...</div>
        <div class="container">
            <!-- here my table content --->
        </div>
    </body>
    </html>

To fix my problem if I add @page{margin-top:15px} then header also affected with this margin.

Spent my whole day in this, any help would be great. Thanks.

Solution

After much research I am able to accomplish my task by adding extra tr to thead for spacing.

<html>
    <body>
        <div id="header">...</div>
        <div id="footer">...</div>
        <div class="container">
            <table>
                <thead>
                    <tr class="extra-spacing-tr"></tr>
                    <-- rest of the table -->
                </thead>
            </table>
        </div>
    </body>
    </html>

and applied height to that tr

.extra-spacing-tr {
    height: 20px;
}