큰 HTML 테이블을 인쇄할 때 행 나누기를 방지하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

큰 HTML 테이블을 인쇄할 때 행 나누기를 방지하려면 어떻게 해야 합니까?

Patricia Arquette

풀어 주다： 2024-12-26 03:46:09

원래의

369명이 탐색했습니다.

How Can I Prevent Row Breaks When Printing Large HTML Tables?

HTML 테이블 인쇄에서 페이지 나누기 관리

광범위한 HTML 테이블을 인쇄할 때 보기 흉하게 행이 잘리는 것을 방지하려면 페이지 나누기를 관리하는 것이 중요합니다. 원래 질문에서는 테이블 대신 누적된 DIV를 활용하고 필요한 페이지 나누기를 적용하는 일반적인 접근 방식을 제안합니다. 하지만 이렇게 중요한 변화를 시작하기 전에 테이블 사용을 유지하는 대체 솔루션을 살펴보겠습니다.

페이지 나누기를 효과적으로 관리하는 핵심은 CSS 속성에 있습니다. 다음 CSS 규칙을 테이블에 적용하면 행이 여러 페이지에 걸쳐 분할되는 것을 방지할 수 있습니다.

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

로그인 후 복사

테이블의 page-break-inside 속성은 테이블 내에서 페이지 나누기가 발생할 수 있음을 지정합니다. 행의 page-break-inside 속성은 행이 여러 페이지에 걸쳐 분할되지 않도록 하고, page-break-after 속성은 행 바로 다음에 페이지 나누기가 방지되도록 합니다. 마지막으로 표 머리글 및 바닥글 요소의 표시 속성은 인쇄 목적으로 표와 연결되도록 보장합니다.

다음은 이러한 CSS 속성을 통합하는 수정된 HTML 표입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

로그인 후 복사

이러한 CSS 규칙을 구현하면 행 나누기를 효과적으로 방지하고 여러 페이지에 걸쳐 인쇄된 테이블의 무결성을 보장할 수 있습니다.

위 내용은 큰 HTML 테이블을 인쇄할 때 행 나누기를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!