ฉันลองหลายวิธีแล้ว แต่ดูเหมือนว่าจะไม่ทำงานอย่างถูกต้อง ฉันมีรายงาน html และต้องพิมพ์รายงานที่มีส่วนหัวและส่วนท้ายในทุกหน้า ฉันต้องการสิ่งนี้ใน Firefox!
โซลูชันที่ 1:
<html>
<head>
<title></title>
<style type="text/css">
@media print {
#footer {
display: block;
position: fixed;
bottom: 0;
}
}
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:100%"> header content </th>
</tr>
</thead>
<tfoot>
<tr>
<td width="100%"><table width="100%" border="0">
<tr>
<td colspan="4"><br>
</td>
</tr>
</table>
</tfoot>
<tbody>
<tr>
<td width="100%"> main content </td>
</tr>
</tbody>
</table>
<table id="footer" width="100%">
<tr>
<td width="100%"> footer content </td>
</tr>
</table>
</body>
</html>
ปัญหาวิธีแก้ปัญหา 1: เนื้อหาหลักซ้อนทับส่วนท้าย
วิธีแก้ปัญหา 2:
<html>
<head>
<title></title>
<style type="text/css">
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
}
@media screen {
thead {
display: block;
}
tfoot {
display: block;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>header content</td>
</tr>
</thead>
<tbody>
<tr>
<td> main content </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer content</td>
</tr>
</tfoot>
</table>
</body>
</html>
วิธีแก้ปัญหา 2: ส่วนท้ายจะอยู่ด้านล่างเนื้อหาหลัก ไม่ได้อยู่ด้านล่างสุดของหน้าเสมอไปอย่างที่ฉันต้องการ
ความช่วยเหลือหรือวิธีแก้ปัญหาอื่นใด?
ขอบคุณ
