ทำซ้ำส่วนหัวของตารางในโหมดพิมพ์


103

เป็นไปได้หรือไม่ที่ CSS จะใช้คุณสมบัติภายใน @page เพื่อบอกว่าส่วนหัวตาราง (th) ควรซ้ำกันในทุกหน้าหากตารางกระจายไปหลายหน้า

คำตอบ:


114

นี่คือสิ่งที่องค์ประกอบTHEADมีไว้สำหรับ เอกสารอย่างเป็นทางการที่นี่


1
ฉันไม่ได้คิดถึงเรื่องนั้น แต่ดูเหมือนจะไม่ได้ผลในทางปฏิบัติ
avernet

1
ฉันใช้มันสำเร็จแล้วใน Firefox
jishi

5
ตามปกติต้องใช้เบราว์เซอร์ที่ไม่เสีย - ดูความคิดเห็นของ jishi
Peter Rowell

9
ความคิดเห็นเหล่านี้ค่อนข้างเก่า ในฐานะของ 3/13/13 ขี้เกียจตรวจสอบจุดที่แสดงให้เห็นว่าการทำงานในล่าสุด IE10 และแม้กระทั่งที่เคารพ IE8 ...
นาธาน

8
ในที่สุด Chrome ก็รองรับส่วนหัวตารางซ้ำสำหรับสื่อสิ่งพิมพ์ นี้จะเปิดใช้งานถ้ามีวันและสามารถปิดการใช้งานด้วยbreak-inside:avoid break:inside: autoดูcodereview.chromium.org/2021703002/#ps20001
Alex Osborn

71

เบราว์เซอร์บางตัวทำซ้ำtheadองค์ประกอบในแต่ละหน้าตามที่ควรจะเป็น คนอื่นต้องการความช่วยเหลือ: เพิ่มสิ่งนี้ใน CSS ของคุณ:

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

Opera 7.5 และ IE 5 จะไม่ทำซ้ำส่วนหัวไม่ว่าคุณจะพยายามทำอะไรก็ตาม

(ที่มา )


Flying Saucer ก็ไม่ได้ซึ่งฉันใช้สร้าง PDF ฉันจะถามคำถามนี้ในรายการส่งจดหมายของ Flying Saucer เพื่อดูว่ามีวิธีอื่นในการทำเช่นนี้หรือไม่
avernet

7
Chrome และ Safari เวอร์ชันล่าสุดยังไม่ทำเช่นนี้ ดูคำตอบของฉันสำหรับลิงก์ไปยังเครื่องมือติดตามปัญหา
Nick Knowlson

1
แม่ของพระเจ้าในเวลานี้เขียน IE5 ยังคงเป็นอะไร?
igorsantos07

ฉันเพิ่งลองtheadตัวอย่างใน CSS ของฉัน (เข้ากันได้กับ 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

4
และเกือบ 4 ปีต่อมา (และ 8 ปีนับตั้งแต่มีการยื่นเรื่อง WebKit) ก็ยังคงเป็นเช่นนั้น!
jcaron

43

Flying Saucer xhtmlrendererทำซ้ำ THEAD ในทุกหน้าของเอาต์พุต PDF หากคุณเพิ่มสิ่งต่อไปนี้ใน CSS ของคุณ:

        table {
            -fs-table-paginate: paginate;
        }

(อย่างน้อยก็ใช้ได้ตั้งแต่รุ่น R8)


4
นี่เป็นเพียงสิ่งที่ฉันกำลังมองหา ขอบคุณ!
Alex

สุดยอด! (ลิงค์ตายแล้ว: /)
Cyril N.

สุดยอด! ขอบคุณ!
Frison Alexander

6

เบราว์เซอร์ Chrome และ Opera ไม่รองรับthead {display: table-header-group;}แต่ส่วนอื่น ๆ รองรับอย่างเหมาะสม ..


จะบรรลุสิ่งนี้ใน Chrome ได้อย่างไร?
Null Pointer

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>

เพียงแค่ทำงานบนเดสก์ท็อป Chrome Chrome/Safari บน iPhone ไม่ทำงาน!
Devin Gong
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.