인쇄 모드에서 표 머리글 반복


101

CSS에서 @page 내부의 속성을 사용하여 테이블이 여러 페이지에 걸쳐있는 경우 모든 페이지에서 테이블 헤더 (th)를 반복해야한다고 말할 수 있습니까?

답변:


109

이것이 THEAD 요소의 용도입니다. 여기에 공식 문서 .


1
나는 그것에 대해 생각하지 않았지만 실제로 작동하지 않는 것 같습니다.
avernet

1
Firefox에서 성공적으로 사용했습니다.
jishi

5
평소와 같이 손상되지 않은 브라우저가 필요합니다-jishi의 의견을 참조하십시오.
Peter Rowell

9
이 댓글은 꽤 오래되었습니다. 2013
Nathan

8
Chrome은 마침내 인쇄 매체에 대해 반복되는 표 헤더를 지원합니다. th가있는 경우 활성화 break-inside:avoid되고으로 비활성화 할 수 있습니다 break:inside: auto. 참조 codereview.chromium.org/2021703002/#ps20001
알렉스 오스본에게

69

일부 브라우저 thead는 예상대로 각 페이지 의 요소를 반복합니다 . 다른 사람들은 도움이 필요합니다 : CSS에 다음을 추가하세요.

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

Opera 7.5 및 IE 5는 어떤 작업을하더라도 헤더를 반복하지 않습니다.

( 소스 )


PDF를 생성하는 데 사용하는 Flying Saucer도 마찬가지입니다. 나는 또 다른 방법이 있는지 알아보기 위해 비행 접시 메일 링리스트에이 질문을 할 것입니다.
avernet

7
최신 버전의 Chrome 및 Safari도 현재이 작업을 수행하지 않습니다. 문제 추적기에 대한 링크는 내 답변을 참조하십시오.
Nick Knowlson 2012 년

1
신의 어머니, IE5가 쓰여졌을 당시에는 여전히 뭔가?
igorsantos07

방금 theadCSS (IE7 호환)에서 예제를 시도했으며 인쇄 미리보기를 수행 할 때 제목이 반복됩니다. 감사합니다. 하지만 다음 페이지의 맨 위에 복제 된 행이 표시됩니다. 왜?
Andrew Truckle

45

이 솔루션을 구현하기 전에 Webkit이 현재이를 수행하지 않는다는 것을 아는 것이 중요합니다.

다음은 Chrome 문제 추적기 관련 문제입니다. http://code.google.com/p/chromium/issues/detail?id=24826

그리고 Webkit 문제 추적기 : https://bugs.webkit.org/show_bug.cgi?id=17205

중요하다는 것을 보여주고 싶다면 Chrome 문제 추적기에 별표를 표시하십시오 (내가했습니다).


1
감사합니다. 스크롤을 내리지 않았다면 큰 골칫거리 였을 것입니다.
Seiyria 2014-07-07

4
그리고 거의 4 년이 지난 후에도 (그리고 WebKit 문제가 제기 된 지 8 년이 지났습니다), 여전히 그렇습니다!
jcaron


6

Chrome 및 Opera 브라우저는 지원하지 thead {display: table-header-group;}않지만 나머지 브라우저는 제대로 지원합니다.


크롬에서 이것을 달성하는 방법?
Null 포인터

4

HTML 표를 어떻게 인쇄합니까? 각 페이지의 머리글 및 바닥 글

Webkit 브라우저에서도 작업

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function PrintPage() {
            document.getElementById('print').style.display = 'none';
            window.resizeTo(960, 600);
            document.URL = "";
            window.location.href = "";
            window.print();
        }

    </script>
    <style type="text/css" media="print">
        @page
        {
            size: auto; /* auto is the initial value */
            margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */
        }
        thead
        {
            display: table-header-group;
        }
        tfoot
        {
            display: table-footer-group;
        }
    </style>
    <style type="text/css" media="screen">
        thead
        {
            display: block;
        }
        tfoot
        {
            display: block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 500px; margin: 0 auto;">
            <thead>
                <tr>
                    <td>
                        header comes here for each page
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                </tr>
                <tr>
                    <td>
                        6
                    </td>
                </tr>
                <tr>
                    <td>
                        7
                    </td>
                </tr>
                <tr>
                    <td>
                        8
                    </td>
                </tr>
                <tr>
                    <td>
                        9
                    </td>
                </tr>
                <tr>
                    <td>
                        10
                    </td>
                </tr>
                <tr>
                    <td>
                        11
                    </td>
                </tr>
                <tr>
                    <td>
                        12
                    </td>
                </tr>
                <tr>
                    <td>
                        13
                    </td>
                </tr>
                <tr>
                    <td>
                        14
                    </td>
                </tr>
                <tr>
                    <td>
                        15
                    </td>
                </tr>
                <tr>
                    <td>
                        16
                    </td>
                </tr>
                <tr>
                    <td>
                        17
                    </td>
                </tr>
                <tr>
                    <td>
                        18
                    </td>
                </tr>
                <tr>
                    <td>
                        19
                    </td>
                </tr>
                <tr>
                    <td>
                        20
                    </td>
                </tr>
                <tr>
                    <td>
                        21
                    </td>
                </tr>
                <tr>
                    <td>
                        22
                    </td>
                </tr>
                <tr>
                    <td>
                        23
                    </td>
                </tr>
                <tr>
                    <td>
                        24
                    </td>
                </tr>
                <tr>
                    <td>
                        25
                    </td>
                </tr>
                <tr>
                    <td>
                        26
                    </td>
                </tr>
                <tr>
                    <td>
                        27
                    </td>
                </tr>
                <tr>
                    <td>
                        28
                    </td>
                </tr>
                <tr>
                    <td>
                        29
                    </td>
                </tr>
                <tr>
                    <td>
                        30
                    </td>
                </tr>
                <tr>
                    <td>
                        31
                    </td>
                </tr>
                <tr>
                    <td>
                        32
                    </td>
                </tr>
                <tr>
                    <td>
                        33
                    </td>
                </tr>
                <tr>
                    <td>
                        34
                    </td>
                </tr>
                <tr>
                    <td>
                        35
                    </td>
                </tr>
                <tr>
                    <td>
                        36
                    </td>
                </tr>
                <tr>
                    <td>
                        37
                    </td>
                </tr>
                <tr>
                    <td>
                        38
                    </td>
                </tr>
                <tr>
                    <td>
                        39
                    </td>
                </tr>
                <tr>
                    <td>
                        40
                    </td>
                </tr>
                <tr>
                    <td>
                        41
                    </td>
                </tr>
                <tr>
                    <td>
                        42
                    </td>
                </tr>
                <tr>
                    <td>
                        43
                    </td>
                </tr>
                <tr>
                    <td>
                        44
                    </td>
                </tr>
                <tr>
                    <td>
                        45
                    </td>
                </tr>
                <tr>
                    <td>
                        46
                    </td>
                </tr>
                <tr>
                    <td>
                        47
                    </td>
                </tr>
                <tr>
                    <td>
                        48
                    </td>
                </tr>
                <tr>
                    <td>
                        49
                    </td>
                </tr>
                <tr>
                    <td>
                        50
                    </td>
                </tr>
                <tr>
                    <td>
                        51
                    </td>
                </tr>
                <tr>
                    <td>
                        52
                    </td>
                </tr>
                <tr>
                    <td>
                        53
                    </td>
                </tr>
                <tr>
                    <td>
                        54
                    </td>
                </tr>
                <tr>
                    <td>
                        55
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        footer comes here for each page
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    <br clear="all" />
    <input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();"
        class="button" />
    </form>
</body>
</html>

데스크톱 크롬에서 작업하기 만하면됩니다. 아이폰의 크롬 / 사파리는 작동하지 않습니다!
Devin Gong 19
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.