Setzen Sie den Standard-Header für jede Seite von CSS?

Question

Ich arbeite mit meinem Projekt für den Druck einiger Dokumente. Dort traf ich einige Probleme in der Kopfzeile für jede Druckseite! Ich möchte die HTML-Tabelle, die so viele tr haben, drucken, es ist auf zwei Seiten getrennt, wenn print.There, möchte ich thead als Header-Element für jede Druckseite.So hilf mir !!

<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> 

Hier möchte ich auch thead auf Seite 2, wenn Druck. (Laufen auf Chrome)

Answer 1

table { 
      -fs-table-paginate: paginate; 
     } 

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

Dies sollte auch funktionieren

Answer 2

Sie benötigen einige Print-Styling auf thead:

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