2012-11-09 3 views
4

몇 가지 방법을 시도했지만 제대로 작동하지 않는 것 같습니다. html 보고서가 있고 모든 페이지의 머리글과 바닥 글로 보고서를 인쇄해야합니다. 파이어 폭스에서이 작업이 필요해!모든 페이지에서 머리말과 꼬리말이 포함 된 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> 

해결 방법이 문제 : 내가 원하는대로 바닥 글은 페이지 하단에 항상 바로 메인 컨텐츠 아래로 유지됩니다.

도움이나 다른 해결책이 있습니까?

감사

+0

시도 : http://csslayoutgenerator.com/ – MatthewK

+0

웹용으로 잘 작동하지만 인쇄물에는 여전히 동일한 문제가 있습니다. – dsbml

답변

0

좋아, 내 문제에 대한 해결책을 찾았습니다. 나는 같은 문제가있는 사람들을 위해 여기에 넣을 것이다. 첫 번째 예에서 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> 

또는 하나 개의 클래스를 지정하고 원하는 높이를 넣어.

+0

너비를 설정했지만 높이를 설정한다고 해봅시다. 더 자세히 설명해 주시겠습니까? – bonitzenator

0

내가 바로 당신을 이해한다면, 시도 : 세트 바닥 글 높이 50 픽셀 (100 픽셀, 200 픽셀 ... 무엇이든) 및 주요 내용 마진 - 하단에 추가 : 50 픽셀 (바닥 글 높이)

하단의 내용을 바닥 글로 제외해야합니다.

+0

죄송합니다,이 경우 고정 된 위치 바닥 글이 인쇄되어 있습니다.이 방법은 작동하지 않습니다 .. – dsbml

관련 문제