Cetak laporan HTML dengan header dan footer di semua halaman - Firefox

Saya mencoba beberapa metode tetapi sepertinya tidak ada yang berfungsi dengan baik. Saya memiliki laporan html dan saya perlu mencetak laporan dengan header dan footer di setiap halaman. Saya ingin ini berfungsi di firefox!

Solusi 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>
              &nbsp;</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>

Solusi 1 masalah: Konten utama berada di atas footer.

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

Solusi 2 masalah: Footer tetap berada tepat di bawah konten utama, tidak selalu berada di bagian bawah halaman seperti yang saya inginkan.

Adakah bantuan atau solusi lain?

Terima kasih


html css printing media-queries
person dsbml    schedule 09.11.2012    source sumber
comment
Coba: csslayoutgenerator.com   -  person MatthewK    schedule 12.11.2012
comment
Berfungsi dengan baik untuk web, tetapi untuk pencetakan saya masih mengalami masalah yang sama.   -  person dsbml    schedule 12.11.2012

Jawaban (2)


arrow_upward
0
arrow_downward

jika saya benar memahami Anda, coba: atur tinggi footer menjadi 50px (100px,200px... apa saja) dan tambahkan ke konten utama margin-bottom:50px (tinggi footer)

Ini harus mengecualikan konten di atasnya dengan footer.

person Extazystas    schedule 12.11.2012
comment
Maaf, dalam hal ini untuk pencetakan dengan posisi footer tetap, cara ini tidak berhasil.. - person dsbml; 12.11.2012

arrow_upward
0
arrow_downward

Oke, saya menemukan solusi untuk masalah saya. Saya akan menaruhnya di sini untuk mereka yang memiliki masalah yang sama. Dalam contoh pertama saya, kita hanya perlu menetapkan ketinggian footer yang kita inginkan.

Misalnya:

<tfoot>
   <tr> 
    <td width="100%"> 
     <table width="100%" border="0"> 
       <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr> 
      <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr> 
      <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr>
    </table> 
  </tfoot>

Atau tetapkan satu kelas dan masukkan ketinggian yang Anda inginkan.

person dsbml    schedule 12.11.2012
comment
Anda mengatur lebar pada contoh, tetapi mengatakan bahwa Anda menetapkan tinggi..? bisakah Anda menguraikan solusinya lebih detail? - person Christopher Bonitz; 12.12.2013