Set default header for each page by css?

user_4395287 0
Viewed 704

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

printing css html
5 Answers

Most browser do repeat <thead> & <tfoot> including chrome latest browsers.

still there is way you can make the thead repeat like below. 

<thead class="report-header">
   <tr>
      <th>
         <div class="header-info">
         ...
         </div>
      </th>
   </tr>
</thead>

And you need to provide css like:

@media print {
thead.report-header {
   display: table-header-group;
}
}

You can find detail description on below link.

repeat header

user_106839530

This css code should do

@media print {
    /* Repeat header row at top of each printed page */
    thead {
        display: table-header-group;
    }
}
Admin1

From this question. Slightly modified, added a second footer-box caption element, and solved with divs, not table elements.

<div class="footer">
    <div class="footer-title-box">
        <div class="footer-box">Title</div>
        <div class="footer-box caption">Title</div>
        <div class="footer-box caption">Title</div>
    </div>
    <div class="footer-row-box">
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
    </div>
    <div class="footer-row-box">
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
    </div>
    <div class="footer-row-box">
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
        <div class="footer-box">Content</div>
    </div>
</div>

.footer {
    display: table;
    width:50%;
    table-layout: fixed;
}
.footer-title-box {
    display: table-header-group;
    font-weight: bold;
}

.footer-row-box {
    display: table-row-group;
}
.footer-box {
    display: table-cell;
    text-align: center;
}
user_38425980
Related