HTML Table header repeating

Question

I am not sure why my table header is repeating on every page after printing HTML Code. I just want it on first page so how can I do it?

I wanted it to display only when the table starts

Answer 1

What you're observing is the intentional behavior of modern browsers. In fact, for quite some time users here on Stack Overflow would ask how to achieve this behavior, prior to it seeing broad support in browsers.

My suggestion would be to leave this behavior as-is, since it provides important context across page-breaks. After all, if you provide 6 pages of tabular data, and page 3 is reviewed on its own, how will the handler know what data is represented by the values unless there is a header to explain the information?

If you feel strongly that the repeated header is not needed, then there may be another approach you can take. You could show the thead for web-viewers, and replace it with a single tr (containing the same information) for printed viewers. For example:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="faux-header">
            <th>Header 1</th>
            <th>Header 1</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
    </tbody>
</table>

You wouldn't want the faux-header visible by default, and you wouldn't want the thead to be visible in a printed context:

@media screen {
    .faux-header {
        display: none;
    }

}

@media print {
    table:has(.faux-header) thead {
        display: none;
    }
}

Answer 2

use td instead of th tag for quick fix like <td>Preventive Care</td>