>  기사  >  웹 프론트엔드  >  JavaScript를 사용하지 않고 웹 보고서의 사용자 정의 머리글과 바닥글을 인쇄하는 방법은 무엇입니까?

JavaScript를 사용하지 않고 웹 보고서의 사용자 정의 머리글과 바닥글을 인쇄하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-25 11:00:02259검색

How to Print Custom Headers and Footers in a Web Report Without Using JavaScript?

각 페이지에 사용자 정의 머리글 및 바닥글 인쇄

인쇄용 웹 기반 보고서를 생성할 때 사용자 정의 머리글 및 바닥글을 포함하는 것이 바람직할 수 있습니다. 각 페이지의 바닥글. 하지만 처음에는 브라우저 창에서는 이 기능이 불가능하다고 가정했습니다.

이전 연구에도 불구하고 테이블을 사용하여 가능한 솔루션이 나타났습니다. CSS를 사용하여 표 요소의 스타일을 지정하면 각각 thead 및 tfoot 태그를 사용하여 머리글과 바닥글의 위치를 ​​지정할 수 있습니다.

<table style="display: table">
  <thead style="display: table-header-group">
    <tr><td>Your header goes here</td></tr>
  </thead>
  <tfoot style="display: table-footer-group">
    <tr><td>Your footer goes here</td></tr>
  </tfoot>
  <tbody>
    <!-- Report body -->
  </tbody>
</table>

머리글과 바닥글이 인쇄된 미디어에만 표시되도록 하려면 CSS 미디어 쿼리를 사용하세요. 구현 가능:

@media print {
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
}
@media screen {
  thead { display: none; }
  tfoot { display: none; }
}

처음에는 이 솔루션이 Firefox 및 Internet Explorer에서만 작동할 것으로 예상되었습니다. 그러나 최근 업데이트로 인해 Chrome 및 Safari에 대한 호환성이 확장되었습니다.

이 테이블 기반 접근 방식은 Internet Explorer 6에서 제한된 CSS 지원에도 불구하고 각 페이지에 사용자 정의 머리글 및 바닥글을 인쇄할 수 있는 실행 가능한 해결 방법을 제공합니다.

위 내용은 JavaScript를 사용하지 않고 웹 보고서의 사용자 정의 머리글과 바닥글을 인쇄하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.