How to design a Table with a fixed header during printing without cutting the header?

Question

I had this Table, I want when I print the table, should print with a fixed header on each paper, and it's doing that, but the headers does not start on the top of the paper, something going wrong

<table id="TableDtl" class="tableClass  cellWithborder"
    style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;">
    <thead>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header0>ID</header0>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header1>NAME</header1>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header2>Quantity</header2>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header3>Per</header3>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header4>Price</header4>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header5>Free</header5>
        </th>
    </thead>
    <tbody>
        <tr>
            <td style="font-size:x-large;font-weight:bold;">100-933-03</td>
            <td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
            <td style="font-size:x-large;font-weight:bold;">4</td>
            <td style="font-size:x-large;font-weight:bold;">Test</td>
            <td style="font-size:x-large;font-weight:bold;">444</td>
            <td style="font-size:x-large;font-weight:bold;">6666</td>
        </tr>
    </tbody>
</table>

I search about it a lot and I try something like this style:

<style>

    @media print {
        @page{
            margin:1em;
        }

        table { 
            page-break-after:auto;
            border-collapse:collapse;
        }
        tr    { page-break-inside:avoid; page-break-after:auto }
        td    { page-break-inside:avoid; page-break-after:auto }
        thead { 
            display:table-header-group;
        }
        tfoot { display:table-footer-group }
    }

</style>

It didn't work at all, and I try playing with (page-break-before, page-break-after, page-break-inside) and also nothing happen

Answer 1

<style type="text/css">
    @media print{ input {display:none} };
</style>

<input type=button value="print" onclick=javascript:window.print()> 
<table id="TableDtl" class="tableClass  cellWithborder"
    style="width:100%;overflow:scroll; font-weight:bold; border: 1px solid Black;" >
    <thead>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header0>ID</header0>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header1>NAME</header1>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header2>Quantity</header2>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header3>Per</header3>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header4>Price</header4>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header5>Free</header5>
        </th>
    </thead>
    <tbody>
        <tr>
            <td style="font-size:x-large;font-weight:bold;">100-933-03</td>
            <td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
            <td style="font-size:x-large;font-weight:bold;">4</td>
            <td style="font-size:x-large;font-weight:bold;">Test</td>
            <td style="font-size:x-large;font-weight:bold;">444</td>
            <td style="font-size:x-large;font-weight:bold;">6666</td>
        </tr>
        <tr>
            <td style="font-size:x-large;font-weight:bold;">100-933-03</td>
            <td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
            <td style="font-size:x-large;font-weight:bold;">4</td>
            <td style="font-size:x-large;font-weight:bold;">Test</td>
            <td style="font-size:x-large;font-weight:bold;">444</td>
            <td style="font-size:x-large;font-weight:bold;">6666</td>
        </tr>
        <tr>
            <td style="font-size:x-large;font-weight:bold;">100-933-03</td>
            <td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
            <td style="font-size:x-large;font-weight:bold;">4</td>
            <td style="font-size:x-large;font-weight:bold;">Test</td>
            <td style="font-size:x-large;font-weight:bold;">444</td>
            <td style="font-size:x-large;font-weight:bold;">6666</td>
        </tr>
        <tr>
            <td style="font-size:x-large;font-weight:bold;">100-933-03</td>
            <td style=" font-size:x-large;font-weight:bold;width:30%">Just For Test</td>
            <td style="font-size:x-large;font-weight:bold;">4</td>
            <td style="font-size:x-large;font-weight:bold;">Test</td>
            <td style="font-size:x-large;font-weight:bold;">444</td>
            <td style="font-size:x-large;font-weight:bold;">6666</td>
        </tr>
    </tbody>
</table>

I have fixed header display issue on print's every page. You need to add multiple TR inside TBODY and check the result. If any issue found then let me know

Answer 2

You have to set display of thead: table-header-group

thead { 
    display: table-header-group
}

Demo:

table { 
    border-collapse:collapse;
    height: 400px;
}
td, th {
   text-align: center;
   padding: 8px;
}
table, td, th {
   border: 1px solid #dddddd;
}
@media print {
    @page{
        margin:1em;
    }

    table { 
        page-break-after:auto;
    }

    td, th {
        padding: 8px;
    }
    tr { 
     page-break-inside:avoid; page-break-after:auto
    }
    td { page-break-inside:avoid; page-break-after:auto }
    thead { 
        display:table-header-group;      /* <== here */
    }
    tfoot { display:table-footer-group }
}

<input type="button" value="Print" onclick="window.print()">
<br />
<br />

<table>
    <thead>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header0>ID</header0>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header1>NAME</header1>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header2>Quantity</header2>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header3>Per</header3>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header4>Price</header4>
        </th>
        <th style="height:80px; font-size:x-large;font-weight:bold;">
            <header5>Free</header5>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>100-933-03</td>
            <td>Just For Test</td>
            <td>4</td>
            <td>Test</td>
            <td>444</td>
            <td>6666</td>
        </tr>
    </tbody>
</table>