HTML을 사용하여 문서의 모든 인쇄 페이지에 머리글과 바닥 글을 인쇄하는 방법은 무엇입니까?

516

인쇄 된 각 페이지에 사용자 정의 머리글과 바닥 글이있는 HTML 페이지를 인쇄 할 수 있습니까?

내용에 관계없이 모든 인쇄 된 페이지 의 상단과 하단에 크기가 16pt 인 빨간색, Arial의 "미분류"라는 단어를 추가하고 싶습니다 .

명확히하기 위해 문서가 5 페이지에 인쇄 된 경우 각 페이지에는 사용자 정의 머리글과 바닥 글이 있어야합니다.

HTML / CSS를 사용하여 이것이 가능한지 아는 사람이 있습니까?

css  header  printing  stylesheet  footer 
— 낭
소스
3
— 피터 크라우스
3
이것은 오랫동안 대답하려고하는 질문입니다. 문제의 핵심은 page, top-center, content, position : running (..)과 같은 CSS 요소입니다. 브라우저가 완전히 @page를 지원한다면 그것을 볼 수 있었다 방법 : techrepublic.com/blog/webmaster/... alistapart.com/articles/boom alistapart.com/articles/building-books-with-css3 일부 공개 문제 : code.google.com / p / chromium / issues / detail? id = 47277 bugs.webkit.org/show_bug.cgi?id=15548
— 다니엘
지나치게 큰 텍스트가 포함되지 않은 문서에 실행 헤더를 추가 하는 Chrome 호환 솔루션을 여기에 게시했습니다 . 그래도 바닥 글에 대한 해결책은 없습니다.
— DoctorDestructo
2
결합 솔루션 : 기술 pisition: fixed과 thead tbody tfoot기술 모두 단점이 있으므로 결합해야 합니다 . 자세한 내용은 여기를 참조 하십시오 .
— Mohammad Musavi

답변:

353

바닥 글이 될 요소를 가져 와서 position : fixed and bottom : 0으로 설정하면 페이지가 인쇄 될 때 인쇄 된 각 페이지의 맨 아래에서 해당 요소가 반복됩니다. 헤더 요소에 대해서도 마찬가지입니다. 대신 top : 0을 설정하십시오.

예를 들면 다음과 같습니다.

<div class="divFooter">UNCLASSIFIED</div>

CSS :

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}
— 인포텍 카
소스
62
두 페이지에 걸쳐있는 요소가 있으면 작동하지 않는 것 같습니다 (내 경우에는 사전)-바닥 글을 덮어 씁니다.
— Benjol
77
웹킷 브라우저가이를 올바르게 지원하지 않는 것 같습니다. 그래도 틀렸다면 정정 해주세요!
— Gregg Lind
61
이것은 모든 페이지에서 반복되는 것은 아닙니다.
— 북서 타이슨
24
Chrome 15.0을 사용하고 있습니다. 스크롤하는 곳이면 화면 중앙에있는 요소 (예 : 페이지 중앙)를 인쇄하기 만하면됩니다. 모든 페이지에 인쇄되는 것은 아닙니다.
— chharvey
11
Firefox와 Chrome에서 테스트했습니다. Firefox에서는이 솔루션이 작동하지만 Chrome에서는 작동하지 않습니다.
— Jaro
131

정답은 HTML 5 및 CSS3이 print미디어 에서 페이지 머리글 및 바닥 글 인쇄를 지원하지 않는다는 것 입니다.

그리고 당신은 그것을 사용하여 그것을 시뮬레이션 할 수 있습니다 :

  • 테이블
  • 고정 위치 블록

그들 각각은 이상적인 일반적인 솔루션이되는 것을 막는 버그를 가지고 있습니다.

— 이안 보이드
소스
36
다른 답변을 믿지 마십시오. 그들은 특별한 경우에는 효과가 있지만 일반적으로 끔찍하게 깨질 것입니다. @page margin 상자가 주요 브라우저에서 구현 될 때까지 신뢰할 수있는 솔루션은 없습니다. 참조 : en.wikipedia.org/wiki/…
— user2847643
21
불행히도 나는 이것을지지해야한다. 비록 우리가 2018 년을 보냈지 만… 왜 해킹이 우리 @footer와 함께 content:"stuff"또는 유사한 것을 제공하지 않는가 .
— Kai Noack
1
실제로 W3C 에서 이러한 시나리오를 해결하기 위한 사양 이 있습니다.
— Mendy
이것이 가장 좋은 대답이라고 생각합니다. 문제는 브라우저 공급 업체입니다. Antenna House antennahouse.com/formatter , Prince princexml.com 과 같은 상용 도구를 사용하여 CSS Paged Media를 사용하여 브라우저 외부에서 멋진 PDF를 만들 수 있습니다 .
— markg
나는 이것을 대답이 아닌 의견으로 만들고 있으므로 "OP was not ask ..."라는 메시지를 보내지 마십시오. 사용자가 실제 "인쇄 미리보기"또는 인쇄 된 문서를 원할 때 고정 머리글 및 바닥 글을 설정하고보기를이 형식으로 렌더링 할 수있는 PDF 생성기를 사용할 수도 있습니다. HTML은 화면 렌더링 용이며 화면에는 페이지 개념이 없습니다. PDF는 인쇄 된 문서 형식을 의미 할 수도 있으며 (아직 그렇지는 않습니다) 페이지 머리글과 바닥 글이 관련된 양식입니다. NReco.PdfGenerator는 비즈니스 목적으로 사용하기에 매우 적합하거나 무료로 사용해 볼 수 있습니다.
— Newclique
71

나는 방금 내 하루 중 더 나은 시간을 실제로 나를 위해 일한 해결책을 생각해 내고 내가 한 일을 공유 할 것이라고 생각했습니다. 위의 솔루션에 대한 문제는 모든 단락 요소가 페이지 하단에서 원하는 바닥 글과 겹칠 수 있다는 것입니다. 이 문제를 해결하기 위해 다음 CSS를 사용했습니다.

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

page-break-inside에 대한 p그리고 content-block나를 위해 매우 중요했다. 내가 p다음을 가지고있을 때마다 h*, 나는 div class = "content-block">그들이 함께 있고 깨지지 않도록 두 가지를 모두 포장합니다 .

나는 누군가가 이것을 알아 내기 위해 3 시간이 걸렸기 때문에 이것이 유용하다고 기대하고 있습니다 (CSS / HTML을 처음 사용하기 때문에 ...)

편집하다

의견의 요청에 따라 예제 HTML 문서를 추가하고 있습니다. 이 파일을 HTML 파일로 복사하여 연 다음 페이지 인쇄를 선택합니다. 인쇄 미리보기에이 작업이 표시되어야합니다. Firefox와 IE에서 결국 작동했지만 Chrome은 한 페이지에 맞도록 글꼴을 작게 만들었으므로 작동하지 않았습니다.

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>
      Example Document
    </h1>
    <div>
      <p>
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      </p>
    </div>
    <div>
      <h3>
        Example Section I
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      </p>
    </div>
    <div class="content-block">
      <h3>Example Section II</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      </p>
    </div>
    <footer>
      This is the text that goes at the bottom of every page.
    </footer>
  </body>
</html>
스 니펫 확장

— 브리튼
소스
1
감사합니다.보다 쉽게 ​​답변 할 수있는 샘플 HTML 문서 만 있으면 좋겠습니다.
— Eric Kigathi
2
@EricKigathi 주목했습니다. 이번 주말에 최선을 다해 답변을 수정하겠습니다.
— brittenb
2
@EricKigathi 주말 마감일을 놓쳤지만 HTML 코드 예제를 추가했습니다. 희망이 도움이됩니다!
— brittenb
감사합니다 @brittenb-대단히 감사합니다. 마감일을 놓친 것에 대해 용서 받았습니다. )
— Eric Kigathi
3
헤더의 두 번째 페이지에는 작동하지 않습니다. 여전히 겹침
— Fei Xue-MSFT 12
17

몇 년 동안 해결책을 찾고 있었고 페이지 내용이 겹치지 않고 여러 페이지에서 작동하는 바닥 글을 인쇄하는 방법 에 대한 이 게시물을 발견했습니다 .

내 요구 사항은 IE8 이었으므로 지금까지 Chrome에서 작동하지 않는 것으로 나타났습니다. [ 업데이트 ] 2018 년 3 월 1 일 현재 Chrome에서도 작동합니다.

이 예제는 CSS 스타일을 설정하여 테이블과 tfoot 요소를 사용합니다. 

tfoot {display: table-footer-group;}
— rweavere
소스
2
이것은 모든 브라우저와 ASP에서 작동합니다 (페이지 바닥 글에 미친 문제가 있음).
— DWolf
17
@DWolf 첫 번째 코멘트는 큰 희망을줍니다. 그리고 그 직후에 한 문장으로 나를 파괴합니다.
— C0ZEN
실제로 Chrome 에서이 작업을 수행했습니다. Linux 기반 Chromium의 이전 버전에서는 작동하지 않았지만 Chrome은 훌륭하게 작동했습니다.
— njfife
2019 년 현재 Chrome에서 작동합니다!
— Oleg
13

마술 솔루션은 실제로 모든 것을 단일 테이블에 넣습니다.

  • thead : 이것은 반복되는 헤더를위한 것입니다.

  • tfoot : 반복 된 바닥 글

  • tbody : 내용.

하나의 tr, td를 만들고 모든 것을 div에 넣습니다.

코드 ::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>
table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
}

특별한 : 여러 페이지가 겹치지 않도록합니다. 처럼:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

오버플로로 인해 페이지 나누기 내의 헤더와 겹치게됩니다.

>> 사용 : page-break-inside: avoid !important;이 클래스와 함께 사용하십시오 article.

table.report-container div.article {
    page-break-inside: avoid;
}

아주 간단합니다. 이것이 원하는 결과를 얻을 수 있기를 바랍니다.

친애하는. ;)

소스 ..

— 비스 크렘 무하마드
소스
최고의 솔루션입니다. 몇 가지 참고 사항 : Flexbox에서 예기치 않은 동작이 발생할 수 있습니다. lsat 페이지의 바닥 글을 맨 아래로 표시하려면 @Infotekka의 솔루션과 솔루션이 결합되어 있어야합니다.
— Arseniy-II
11

에서 이 질문 - 인쇄 전용 스타일 시트에 다음과 같은 스타일을 추가합니다. 이 솔루션은 IE 및 Firefox에서는 작동하지만 Chrome 에서는 작동 하지 않습니다 (버전 21 기준).

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}
— 블레이즈 몬거
소스
1
이 솔루션은 하나만 작동한다는 것을 알았습니다. 모든 브라우저를 테스트하지는 않았지만 Firefox에서 작동합니다!
— Primoz Rome 2013
2
2017 에서도 여전히 Chrome에서 작동하지 않습니다! 그러나 Firefox에서 작동
— Mehdi Dehghani
@MehdiDehghani : 나의 나쁜 .. 코멘트를
— 벗기
10

CSS에서 스타일을 정의 하려면 페이지 나누기 를 사용 하십시오 .

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

그런 다음 문서의 적절한 위치에 마크 업을 추가하십시오.

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

참고 문헌

— 폴 스웨트
소스
32
각 페이지에 머리글과 바닥 글이 인쇄되지는 않습니다. 최상의 추측으로 많은 "페이지"를 지정합니다. 문서 높이 (페이지 수)를 모르면 쓸모가 없습니다.
— rainabba
@rainabbaif the document was printed onto 5 pages
— Paul Sweatte
4
그것은 단지 예일뿐입니다. 답변을 정확하게 안내하는 데 사용해서는 안됩니다.
— igorsantos07
@ igorsantos07 should은 의미하지 않습니다 don't. If(단지 예) 단어 if(단지 예)가 OP에 의해 사용되며 if(단지 예) OP가 더 이상 활성화되어 있지 않습니다. if이미 일반적인 답변이 있는 특정 답변 (예 : 예) 을 제공하는 것이 좋습니다 if(단지 예를 들어) 문제의 언어 (HTML / CSS) 및 사양은 간접적 인 사용 을 피하고 문서를 단순화 하도록 설계 되었습니까? (그냥 예) 왜 그렇습니까? 그렇지 않으면 왜 안됩니까? If
— Paul Sweatte
5

tfoot & css 규칙을 결합한이 헛된 전투와 싸우려고했지만 Firefox에서만 작동했습니다 : (. 일반 CSS를 사용하면 내용이 바닥 글을 통해 흐릅니다. 이는 테이블 바닥 글이 실제 페이지가 아니라 테이블 용이므로 Chrome 16, Opera 11, Firefox 3 & 6 및 IE6에서 테스트되었습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>

<style>

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

</style>
</head>

<body>

<div id="footer_wrapper">
  <div id="footer_content">
    Total 4923
  </div>
</div>


<TABLE CELLPADDING=6>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
</TBODY>

<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>

</TABLE>

</body>
</html>
— 주스
소스
4

모든 페이지에 헤더를 추가 할 때만 작동하는 한 가지 방법은 <table>다음과 같이 콘텐츠를에 래핑 한 다음 헤더 콘텐츠를 <thead>태그 에 넣고 콘텐츠를 태그 에 넣는 것입니다 <tbody>.

<table>
  <thead>
    <tr>
      <th>This content appears on every page</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Put all your content here, it can span multiple pages and your header will show up at the top of each page</td>
     </tr>
   </tbody>
 </table>

이것은 다른 브라우저에 대해서는 100 % 확실하지 않은 Chrome에서 작동합니다.

— 다나 우드맨
소스
1
이것은 우리의 thead와 tfoot에 많은 <tr> 행이없고, thead와 tfoot에 max-height 세트가있는 한 작동합니다. 또는 5 작동
— Sundara Prabu
깔끔한 트릭입니다! Thead는 매력처럼 작동하지만 발은 그렇지 않습니다. 작동시키는 방법에 대한 아이디어가 있습니까?
— Irikos
Tfoot은 브라우저에서 작동하지만 MS 단어에서는 작동하지 않습니다. Thead는 둘 다에서 작동합니다.
— Irikos
3

javascipt를 사용할 수 있으면 클라이언트가 사용 가능한 공간을 기반으로 요소를 배치하기 위해 javascript를 사용하여 컨텐츠를 배치하도록 처리하십시오.

jquery columnizer 플러그인을 사용하여 고정 크기 블록으로 컨텐츠를 동적으로 배치하고 렌더링 루틴의 일부로 머리글과 바닥 글을 배치 할 수 있습니다. http://welcome.totheinter.net/columnizer-jquery-plugin/

예제 10 http://welcome.totheinter.net/autocolumn/sample10.html 참조

os에서 활성화 된 경우 브라우저는 여전히 고유 한 머리글 또는 바닥 글을 추가합니다. 플랫폼과 브라우저에서 일관된 레이아웃은 조건부 CSS가 필요할 것입니다.

— 스파크
소스
3
제공된 데모는 더 보편적 인 콘텐츠는 물론 작동하지 않습니다 (페이지가 끊어지지 않고 서로 넘겨지는 등).
— rainabba
1
나는 분명히 했어야했다. 제공된 링크는 컨테이너에 컨텐츠를 배치하기위한 Javascript 라이브러리의 예이며 인쇄용으로 설정되지 않았습니다. 이 링크는 js를 사용하여 지정된 경계 내에서 컨텐츠를 레이아웃하는 예입니다. js를 wkhtmltopdf와 함께 렌더링 엔진으로 사용하여 데이터베이스 내용에서 요리 책을 만들었습니다.
— sparkalow
문제는 인쇄에 관한 것입니다.
— Greg Blass
2

Chrome에 끔찍한 CSS 인쇄 지원 기능이 있다는 사실에 놀랐습니다.

내 작업은 각 페이지마다 약간 다른 바닥 글을 표시해야했습니다. 가장 간단한 경우에는 증가하는 장과 페이지 번호 만 있습니다. 좀 더 복잡한 경우 바닥 글에 더 많은 텍스트 (예 : 여러 각주)가 있으면 크기가 확장되어 해당 페이지의 컨텐트 영역에있는 내용이 축소되고 그 일부가 다음 페이지로 리플 로우됩니다.

CSS 인쇄는 적어도 오늘날의 거친 브라우저 지원으로는 해결할 수 없습니다. 그러나 CSS3는 인쇄물 밖에서 많은 노력을 기울일 수 있습니다.

https://jsfiddle.net/b9chris/moctxd2a/29/

<div class=page>
  <header></header>
  <div class=content>Content</div>
  <footer></footer>
</div>

SCSS :

body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}

Cat Ipsum을 포함하여 예제에 약간 더 많은 코드가 있습니다. 그러나 사용중인 js는 페이지 매김을 깨지 않고 머리글 / 바닥 글이 얼마나 변할 수 있는지 보여주기 위해 있습니다. 핵심은 실제로 CSS Flexbox에서 컬럼 하단 고정 트릭을 가져 와서 알려진 고정 높이의 페이지에 적용하는 것입니다. "마진이 떠나 width: 7.5in와 height: 10in정확히. CSS의 플렉스 컨테이너 (정확한 치수를 이야기하면div.page ), 그것은 확장하고 기존 타이포그래피에서 할 길을 수축 머리글과 바닥 글을 쉽게 얻을.

예를 들어 바닥 글이 3이 아닌 8 각주로 커질 때 남은 것은 페이지의 내용을 흐르게하는 것입니다. 그것을하기 위해. 생각 나게하는 한 가지 방법은 머리글과 바닥 글을 100 % 너비 부동 수로 바꾸고 자바 스크립트로 배치하는 것입니다. 브라우저는 자동으로 일반 컨텐츠 흐름에 대한 중단을 처리합니다.

— 크리스 모 스키니
소스
0

이것이 인쇄 전용입니까? 사이트의 모든 페이지에이 태그를 추가하고 CSS를 사용하여 태그를 인쇄 전용 미디어로 정의 할 수 있습니다.

예를 들어, 이것은 예제 헤더 일 수 있습니다.

<span class="printspan">UNCLASSIFIED</span>

그리고 CSS에서 다음과 같이하십시오.

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

마지막으로, 모든 페이지에 머리글 / 바닥 글을 포함 시키려면 서버 측 포함을 사용하거나 PHP 또는 ASP로 생성 된 페이지가있는 경우 공통 파일로 코드를 작성하면됩니다.

편집하다:

이 답변은 문서의 실제 인쇄 버전에 다른 것을 보여주지 않고 무언가를 보여주는 방법을 제공하기위한 것입니다. 그러나 의견에서 알 수 있듯이 내용이 넘칠 때 여러 인쇄 페이지에 바닥 글이있는 문제는 해결되지 않습니다.

그럼에도 불구하고 도움이 될 수 있도록 여기에 남겨두고 있습니다.

— 젤턴
소스
4
가시성보다는 디스플레이를 사용하는 경우 +1-가시성 : 숨겨진 예약 공간, 디스플레이 : 없음은 공백을 축소하고 종이를 절약하며 지구를 더 오래 생존시킵니다.
— Fenton
3
-1 : 인쇄 스타일 시트의 좋은 예이지만 내용이 페이지에 넘칠 때 발생하는 문제는 다루지 않습니다. 따라서 마지막 페이지에는 바닥 글 만 표시됩니다.
— NotMe
0

Asp.net Razor Engine 또는 Angular와 같은 템플릿 엔진을 사용하는 경우 페이지를 다시 생성하고 페이지를 여러 페이지로 분할 한 다음 각 페이지를 자유롭게 마크 업하고 머리글과 바닥 글을 테마에 둘 수 있다고 생각합니다. 한 가지 예는 다음과 같습니다.

@page {
  size: A4;  
   margin: .9cm;
}


@media print {

   body.print-paper-a4 {
    width: 210mm;
    height: 297mm;
  }

   body {
       background: white;
       margin: 0;
       padding: 0;
   }

   .print-stage,
   .no-print {
       display: none;
   }


   body.print-paper.a4 .print-paper {
      width: 210mm;
        height: 297mm;
    }

   .print-paper {
       page-break-after: always;
       margin: 0;
       padding: .8cm;
       border:none;
       overflow: hidden;
   }

}





.print-papers {
    display: block;
    z-index: 2000;
    margin: auto;

}


body.print-paper-a4 .print-paper {
    width: 21cm;
    height:27cm;
}


.print-paper {
    margin: auto;
    background: white;
    border: 1px dotted black;
    box-sizing: border-box;
    margin: 1cm auto;
    padding: .8cm;
       overflow: hidden;   
}


body.print-mode .no-print-preview {
    display: none;
}

body.print-mode .print-preview {
    display: block;
}
<body class="print-mode print-paper-a4">
        
        <div class="print-papers print-preview">
            <div class="print-paper">
                <div style="font-size: 5cm">
                    HELLO
                </div>

            </div>
            <div class="print-paper">
              <div class="page-header">
                </div>
              
              
            </div>
            <div class="print-paper">
                
                

            </div>            
        </div>
  </body>
스 니펫 확장

— pixparker
소스
0

하나의 해결책을 찾았습니다. 기본 아이디어는 표를 만들고 광고 섹션에서 헤더의 데이터를 tr에 배치하고 CSS에 의해 tr이 화면에 인쇄되지 않은 경우에만 tr을 표시하고 일반 헤더는 인쇄되지 않은 화면에만 표시되도록하는 것입니다. 많은 페이지에서 100 % 작업 인쇄. 샘플 코드는 여기

<style> 
    @media screen {
        .only_print{
            display:none;
        }
    }
    @media print {
        .no-print {
            display: none !important;
        }
    }
    TABLE{border-collapse: collapse;}
    TH, TD {border:1px solid grey;}
</style>
<div class="no-print">  <!-- This is header for screen and will not be printed -->
    <div>COMPANY NAME FOR SCREEN</div>
    <div>DESCRIPTION FOR SCREEN</div>
</div>

<table>
    <thead>
        <tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
            <td colspan="100" style="border: 0px;">
                <div>COMPANY NAME FOR PRINT</div>
                <div>DESCRIPTION FOR PRINT</div>
            </td>
        </tr>
        <!-- From here Actual Data of table start -->
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </tbody>
</table>
— AZ 소프트
소스
0

Chrome, Firefox 및 Safari에서 작동합니다. 페이지 내용을 겹치지 않고 각 페이지에 머리글과 바닥 글을 고정시킵니다.

CSS

<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Pagina " counter(page);
  }

</style>

HTML

<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>
— 프레드 케이
소스
-2

일부 게시물을 기반으로, 나는 position: fixed나를 위해 일 한다고 생각 합니다.

body {
  background: #eaeaed;
  -webkit-print-color-adjust: exact;
}

.my-footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

.my-header {
  background: red;
  top: 0;
  left: 0;
  position: fixed;
  right: 0;
}
<html>

<head>
  <meta charset=utf-8 />
  <title>Header & Footer</title>

</head>

<body>
  <div>
    <div class="my-header">Fixed Header</div>
    <div class="my-footer">Fixed Footer</div>
    <table>
      <thead>
        <tr>
          <th>TH 1</th>
          <th>TH 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>
스 니펫 확장

크롬에서 Ctrl + P를 누르면 각 페이지의 머리글 및 바닥 글 텍스트가 표시됩니다. 그것이 도움이되기를 바랍니다.

— 저스틴 파텔
소스
12
예, 머리글과 바닥 글은 모든 페이지에 인쇄되지만 페이지의 내용과 겹칩니다.
— Tony
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.