Печать отчета в формате HTML с верхним и нижним колонтитулами на всех страницах - Firefox

Я пробовал несколько методов, но ни один из них не работает должным образом. У меня есть отчет в формате 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>
              &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>

Решение 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 проблемы: нижний колонтитул остается чуть ниже основного контента, а не всегда внизу страницы, как хотелось бы.

Любая помощь или другое решение?

Спасибо


html css printing media-queries
person dsbml    schedule 09.11.2012    source источник
comment
Попробуйте: csslayoutgenerator.com   -  person MatthewK    schedule 12.11.2012
comment
Хорошо работает для Интернета, но для печати у меня все те же проблемы.   -  person dsbml    schedule 12.11.2012

Ответы (2)


arrow_upward
0
arrow_downward

если я вас правильно понимаю, попробуйте: установите высоту нижнего колонтитула на 50 пикселей (100 пикселей, 200 пикселей... что угодно) и добавьте к основному содержимому margin-bottom: 50px (высота нижнего колонтитула)

Это должно исключать перекрывающийся контент с нижним колонтитулом.

person Extazystas    schedule 12.11.2012
comment
Извините, в этом случае для печати с фиксированным нижним колонтитулом этот метод не работает. - person dsbml; 12.11.2012

arrow_upward
0
arrow_downward

Хорошо, я нашел решение своей проблемы. Выложу сюда для тех, у кого такая же проблема. В моем первом примере нам просто нужно присвоить tfoot высоту, которую мы хотим для нижнего колонтитула.

Например:

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

Или назначьте один класс и поставьте нужную высоту.

person dsbml    schedule 12.11.2012
comment
Вы устанавливаете ширину в примере, но говорите, что устанавливаете высоту..? можно подробнее решение? - person Christopher Bonitz; 12.12.2013