Wednesday, 31 July 2019

Set default header for each page by css?

I working with my project for printing some documents.There I met some problem in set header for each print pages ! I want to print the html table that have so many tr ,its separated to two pages when print.Therefore,I want to set thead as header element for each print page.So help me !!

<style type="text/css">
table {
  border: 1px solid #eee;
  width: 100%;
  color : green;
}
th,td {
    border: 1px solid red;
    width: 50px;
    height: 50px;
}
@media print {
body * {visibility: hidden;}
#printable * {visibility: visible;}
#printable th {

    top: 0;
}
}
</style>
<div id="printable">
<span><center>Print Example</center></span>
<table>
    <thead>
        <tr><th>Name</th>
            <th>Salary</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr>
        <tr><td>Sheee</td>
            <td>3483939</td>
            <td>111111</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>David</td>
            <td>3828</td>
            <td>83939</td>
        </tr>
        <tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr><tr><td>Jone</td>
            <td>39393</td>
            <td>0202022</td>
        </tr>
        <tr><td>Smith</td>
            <td>39000383929</td>
            <td>0101010101</td>
        </tr>
    </tbody>
 </table>
</div>

Here I also want thead to page 2 when print.(Running on Chrome)

enter image description here



from Set default header for each page by css?

No comments:

Post a Comment