7

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

Sumit Patel
  • 4,530
  • 1
  • 10
  • 28
Jack jdeoel
  • 4,554
  • 5
  • 26
  • 52
  • Possible duplicate of [CSS: Repeat table headers in print mode](http://stackoverflow.com/questions/274149/css-repeat-table-headers-in-print-mode) – andyb Mar 22 '16 at 14:04
  • 1
    Short answer is most browsers don't support repeating the `` on subsequent pages still. From the comments on the other question, Firefox and IE have implemented it. – andyb Mar 22 '16 at 14:10
  • @andyb Thanks for your comments ,I found that firefox is worked as you said.My testing browser is chrome,so dont worked!!! :) – Jack jdeoel Mar 24 '16 at 03:15
  • 1
    For me in chrome `75.0.3770.142`, the OP code works fine? https://i.stack.imgur.com/iCfuj.png – Tarun Lalwani Jul 31 '19 at 05:35
  • its working for me too, you should check this answer https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode – Muhammad Aug 05 '19 at 17:46
  • You may have added additional styles to page 2. And also separate css from the html to css file for proper templating. – Akeel ahamed Aug 06 '19 at 11:32

5 Answers5

3

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

Sumit Patel
  • 4,530
  • 1
  • 10
  • 28
0
 table {
            -fs-table-paginate: paginate;
        }

https://code.google.com/archive/p/flying-saucer/

This should work also

sam thenoob
  • 99
  • 1
  • 9
0

You need some print-styling on thead:

@media print {
    /* Repeat header row at top of each printed page */
    thead {
        display: table-header-group;
    }
}
E.C.Pabon
  • 265
  • 1
  • 9
0

This css code should do

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

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;
}
Christian
  • 4,902
  • 4
  • 24
  • 42