큰 HTML 표를 인쇄할 때 CSS가 행 나누기를 어떻게 방지할 수 있습니까?-CSS 튜토리얼-php.cn

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

대형 HTML 표 인쇄 시 페이지 나누기 처리: CSS 접근 방식

광범위한 HTML 표를 인쇄할 때 행 연속성을 방해하는 페이지 나누기가 발생할 수 있습니다. 답답하다. 이 문제를 해결하려면 CSS 페이지 나누기 속성을 사용해 보세요.

요소를 사용하면 브라우저는 페이지 나누기를 시작하기 전에 현재 페이지의 테이블을 완성하려고 시도합니다. 또한 요소는 행이 여러 페이지에 걸쳐 분할되는 것을 방지합니다.

머리글 및 바닥글 가시성을 유지하려면

규칙. 이렇게 하면 페이지 나누기가 발생하기 전에 현재 행이 완료되어 머리글이나 바닥글 정보가 분리되는 것을 방지할 수 있습니다.

다음 코드는 이 접근 방식을 보여줍니다.

<!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 표를 인쇄할 때 CSS가 행 나누기를 어떻게 방지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：CSS `calc()` 함수 내에서 Sass 변수를 어떻게 성공적으로 사용할 수 있나요? 다음 기사：Flexbox 대신 CSS 위치 지정을 사용하여 이미지 위에 텍스트를 중앙에 배치하려면 어떻게 해야 합니까?

본 웹사이트의 성명

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

저자별 최신 기사

에서 2024-04-29 11:01:01

2244

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19