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)
from Set default header for each page by css?
No comments:
Post a Comment