집 >웹 프론트엔드 >CSS 튜토리얼 >큰 HTML 표를 인쇄할 때 CSS가 행 나누기를 어떻게 방지할 수 있습니까?

큰 HTML 표를 인쇄할 때 CSS가 행 나누기를 어떻게 방지할 수 있습니까?

Mary-Kate Olsen원래의: 2024-12-20 00:45:16356검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html for while auto break using this table tr issue

성명：

이전 기사：CSS `calc()` 함수 내에서 Sass 변수를 어떻게 성공적으로 사용할 수 있나요?다음 기사：CSS `calc()` 함수 내에서 Sass 변수를 어떻게 성공적으로 사용할 수 있나요?