표를 사용하여 여러 브라우저에서 웹 페이지의 사용자 정의 머리글과 바닥글을 인쇄하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

표를 사용하여 여러 브라우저에서 웹 페이지의 사용자 정의 머리글과 바닥글을 인쇄하려면 어떻게 해야 합니까?

Mary-Kate Olsen

Oct 26, 2024 am 02:42 AM

How can I use Tables to Print Custom Headers and Footers in Web Pages Across Browsers?

표를 사용하여 웹 페이지에서 사용자 정의 머리글 및 바닥글 인쇄

웹 개발에서 모든 페이지에 사용자 정의 머리글 및 바닥글을 인쇄하는 것은 특히 브라우저 간 호환성을 고려하면 어려운 작업입니다. 역사적으로는 불가능하다고 여겨졌으나 최근의 발전으로 실행 가능한 솔루션이 제공되었습니다.

CSS를 통해 이를 달성하기 위해 사용자는 thead 및 tfoot HTML 요소를 사용하고 적절한 CSS 스타일을 적용했습니다. 이러한 요소는 다음과 같은 CSS 정의와 결합될 때

<code class="css">thead { display: table-header-group; }
tfoot { display: table-footer-group; }</code>

로그인 후 복사

원하는 동작을 활성화합니다.

<code class="html"><body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table
</body></code>

로그인 후 복사

HTML에서 다음과 같이 구현하면 이 접근 방식은 인쇄된 모든 페이지에 머리글과 바닥글을 효과적으로 표시합니다.

그러나 이 기술이 모든 시나리오에 이상적이지는 않을 수 있다는 점에 유의하는 것이 중요합니다. . 예를 들어 머리글이나 바닥글 크기가 동적으로 변하는 경우 이상적인 페이지 나누기 위치를 계산하는 것이 어려울 수 있습니다. 또한 이 접근 방식은 테이블 기반 접근 방식보다 CSS 기반 레이아웃을 우선시하는 현재 웹 디자인 모범 사례와 잘 맞지 않을 수 있습니다.

호환성을 더욱 향상시키기 위해 @media 규칙 세트를 활용하여 헤더가 및 바닥글은 인쇄된 매체에만 표시되어야 합니다.

<code class="css">@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}</code>

로그인 후 복사

이 수정을 통해 머리글과 바닥글은 화면에서는 숨겨지지만 페이지가 인쇄될 때는 표시됩니다.

주목할 가치가 있습니다 Chrome과 같은 일부 브라우저는 인쇄 매체의 표 머리글과 바닥글에 대한 지원을 구현했습니다. 그러나 Internet Explorer 6과 같은 레거시 브라우저는 이 접근 방식을 완전히 지원하지 않으므로 대체 솔루션이 필요할 수 있습니다.

위 내용은 표를 사용하여 여러 브라우저에서 웹 페이지의 사용자 정의 머리글과 바닥글을 인쇄하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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