집 > 기사 > 웹 프론트엔드 > ## 인쇄된 페이지에서 머리글과 바닥글이 반복되는 문제를 표로 해결할 수 있나요?

## 인쇄된 페이지에서 머리글과 바닥글이 반복되는 문제를 표로 해결할 수 있나요?

Linda Hamilton원래의: 2024-10-26 04:08:27730검색

## Can Tables Solve the Challenge of Repeating Headers and Footers on Printed Pages?

여러 인쇄 페이지에서 머리글 및 바닥글 반복 달성

소개:

생성된 인쇄 문서에서 머리글 및 바닥글 일관성 유지 웹페이지에서 확인하는 것은 난감한 일이 될 수 있습니다. 광범위한 연구에도 불구하고 많은 솔루션이 여전히 파악하기 어렵습니다. 그러나 이 문서에서는 이 문제를 명확히 하고 해결하려고 시도합니다.

머리글과 바닥글을 모든 페이지에 인쇄할 수 있습니까?

귀하의 쿼리에 따르면 다음과 같은 질문이 발생합니다. 여러 인쇄 페이지에 사용자 정의 머리글과 바닥글을 반복할 수 있습니까? 귀하께서는 회의적인 입장을 표명하셨지만 그러한 해결책의 가능성을 탐구하는 것이 타당합니다.

문제 접근:

CSS 미디어 유형이 그렇지 않을 수 있다는 결론을 정확하게 내리셨습니다. 이 시나리오의 주요 장애물. 대신 테이블과 테이블 헤드 태그를 사용할 가능성을 조사했습니다. 그러나 이 접근 방식에 대해 좀 더 자세히 살펴보겠습니다.

해결책:

레이아웃 디자인에서 인식된 단점에도 불구하고 테이블 활용은 이 작업에서 효과적인 솔루션임이 입증되었습니다. 사례. 다음 CSS 스타일을 설정하면 원하는 반복을 얻을 수 있습니다.

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

따라서 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>

머리글과 바닥글은 인쇄될 때만 나타납니다. 다음 @media 매개변수를 활용하세요.

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

브라우저 호환성:

이 방법은 초기에 Firefox 및 IE에서 작동했습니다. 그러나 이제 Chrome에서도 해결되었습니다. 따라서 위에서 언급한 Chrome 문제 추적기의 버그는 더 이상 사용되지 않는 것으로 간주될 수 있습니다.

위 내용은 ## 인쇄된 페이지에서 머리글과 바닥글이 반복되는 문제를 표로 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

firefox css chrome html for while this table issue

성명：

이전 기사：목록 항목의 전체 공간을 채우기 위해 앵커 태그를 늘리는 방법은 무엇입니까?다음 기사：목록 항목의 전체 공간을 채우기 위해 앵커 태그를 늘리는 방법은 무엇입니까?