Ulangi header tabel dalam mode cetak

101

Apakah mungkin dalam CSS menggunakan properti di dalam @page untuk mengatakan bahwa header tabel (th) harus diulangi pada setiap halaman jika tabel tersebar di beberapa halaman?

css css-tables avernet
sumber

Jawaban:

109

Untuk itulah elemen THEAD . Dokumen resmi di sini .

tvanfosson.dll
sumber
1
Saya belum memikirkannya, tetapi tampaknya tidak berhasil dalam praktiknya.
avernet
1
Saya telah berhasil menggunakannya di Firefox.
jishi
5
Seperti biasa, ini membutuhkan browser yang tidak rusak - lihat komentar jishi.
Peter Rowell
9
Komentar ini sudah cukup lama. Mulai 13/03/13 pemeriksaan tempat malas menunjukkan bahwa ia berfungsi di IE10 terbaru, dan bahkan IE8 yang terhormat ...
Nathan
8
Chrome akhirnya mendukung header tabel berulang untuk media cetak. Ini diaktifkan jika th memiliki break-inside:avoid, dan dapat dinonaktifkan dengan break:inside: auto. Lihat codereview.chromium.org/2021703002/#ps20001
Alex Osborn
69

Beberapa browser mengulangi theadelemen pada setiap halaman, sebagaimana mestinya. Orang lain membutuhkan bantuan: Tambahkan ini ke CSS Anda:

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

Opera 7.5 dan IE 5 tidak akan mengulang header apapun yang Anda coba.

( sumber )

nickf
sumber
Begitu pula dengan Piring Terbang, yang saya gunakan untuk menghasilkan PDF. Saya juga akan menanyakan pertanyaan ini di milis Piring Terbang untuk mengetahui apakah ada cara lain untuk melakukannya.
avernet
7
Versi terbaru Chrome dan Safari saat ini juga tidak melakukan ini. Lihat jawaban saya untuk tautan ke pelacak masalah mereka.
Nick Knowlson
1
bunda tuhan, pada saat ini ditulis IE5 masih ada?
igorsantos07
Saya baru saja mencoba theadcontoh di CSS saya (kompatibel dengan IE7) dan itu mengulangi judul ketika saya melakukan pratinjau cetak. Terima kasih. Tapi, saya melihat untuk mendapatkan baris yang direplikasi di bagian atas halaman berikutnya. Mengapa?
Andrew Truckle
45

Sebelum Anda menerapkan solusi ini, penting untuk mengetahui bahwa Webkit saat ini tidak melakukan ini.

Berikut masalah yang relevan di pelacak masalah Chrome: http://code.google.com/p/chromium/issues/detail?id=24826

Dan di pelacak masalah Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205

Beri bintang di pelacak masalah Chrome jika Anda ingin menunjukkan bahwa ini penting bagi Anda (saya lakukan).

Nick Knowlson
sumber
1
Terima kasih untuk ini - ini akan membuat saya sakit kepala hebat jika saya tidak menggulir ke bawah.
Seiyria
4
Dan hampir 4 tahun kemudian (dan 8 tahun sejak masalah WebKit diajukan), hal ini masih terjadi!
jcaron
41

Flying Saucer xhtmlrenderer mengulangi THEAD di setiap halaman keluaran PDF, jika Anda menambahkan yang berikut ini ke CSS:

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

(Ini berfungsi setidaknya sejak rilis R8.)

Eero
sumber
4
Inilah yang saya cari. Terima kasih!
Alex
Hebat! (tautannya mati: /)
Cyril N.
Hebat! Terima kasih!
Frison Alexander
6

Browser Chrome dan Opera tidak mendukung thead {display: table-header-group;}tetapi yang lainnya mendukung dengan baik ..

SantoshK
sumber
bagaimana cara mencapai ini di chrome?
Null Pointer
4

bagaimana cara mencetak tabel HTML. Header dan footer di setiap halaman

Juga Bekerja di Browser 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>
Urooj Khan
sumber
Cukup bekerja di chrome desktop. Chrome/Safari di iphone tidak berfungsi!
Devin Gong