Powtórz nagłówki tabeli w trybie drukowania

101

Czy w CSS można użyć właściwości wewnątrz @page, aby powiedzieć, że nagłówki tabeli (th) powinny być powtarzane na każdej stronie, jeśli tabela znajduje się na wielu stronach?

css css-tables avernet
źródło

Odpowiedzi:

109

Do tego służy element THEAD . Oficjalne dokumenty tutaj .

tvanfosson
źródło
1
Nie myślałem o tym, ale to nie działa w praktyce.
avernet
1
Z powodzeniem wykorzystałem to w przeglądarce Firefox.
jishi
5
Jak zwykle wymaga sprawnej przeglądarki - zobacz komentarz jishi.
Peter Rowell
9
Te komentarze są dość stare. Od 13.03.13 leniwe sprawdzanie miejscowe pokazuje, że działa w najnowszym IE10, a nawet czcigodnym IE8 ...
Nathan
8
Chrome wreszcie obsługuje powtarzające się nagłówki tabel dla mediów drukowanych. Jest to włączone, jeśli ma th break-inside:avoid, i można je wyłączyć za pomocą break:inside: auto. Zobacz codereview.chromium.org/2021703002/#ps20001
Alex Osborn
70

Niektóre przeglądarki powtarzają ten theadelement na każdej stronie, tak jak powinny. Inni potrzebują pomocy: Dodaj to do swojego CSS:

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

Opera 7.5 i IE 5 nie będą powtarzać nagłówków bez względu na to, co spróbujesz.

( źródło )

nickf
źródło
Nie działa też Flying Saucer, którego używam do generowania pliku PDF. Zadam również to pytanie na liście mailingowej Flying Saucer, aby sprawdzić, czy jest inny sposób, aby to zrobić.
avernet
7
Najnowsze wersje Chrome i Safari również obecnie tego nie robią. Zobacz moją odpowiedź na linki do ich trackerów problemów.
Nick Knowlson
1
Matko Boża, kiedy to było napisane, IE5 wciąż było czymś?
igorsantos 07
Właśnie wypróbowałem theadprzykład w moim CSS (kompatybilnym z IE7) i powtarza nagłówki, gdy robię podgląd wydruku. Dziękuję Ci. Ale widzę, aby uzyskać replikowany wiersz u góry następnej strony. Czemu?
Andrew Truckle,
45

Przed wdrożeniem tego rozwiązania ważne jest, aby wiedzieć, że Webkit obecnie tego nie robi.

Oto odpowiedni problem w narzędziu do śledzenia błędów Chrome: http://code.google.com/p/chromium/issues/detail?id=24826

Oraz w narzędziu do śledzenia problemów Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205

Oznacz go gwiazdką w narzędziu do śledzenia problemów Chrome, jeśli chcesz pokazać, że jest to dla Ciebie ważne (tak zrobiłem).

Nick Knowlson
źródło
1
Dzięki za to - spowodowałbym ogromny ból głowy, gdybym nie przewinął w dół.
Seiyria
4
I prawie 4 lata później (i 8 lat od złożenia sprawy z WebKitem), nadal tak jest!
jcaron
41

Latający spodek xhtmlrenderer powtarza THEAD na każdej stronie wyjścia PDF, jeśli dodasz następujące elementy do swojego CSS:

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

(Działa przynajmniej od wydania R8).

Eero
źródło
4
Właśnie tego szukałem. Dziękuję Ci!
Alex,
Niesamowite! (link nie działa: /)
Cyril N.
Niesamowite! Dzięki!
Frison Alexander
6

Przeglądarki Chrome i Opera nie obsługują, thead {display: table-header-group;}ale pozostałe obsługują prawidłowo.

SantoshK
źródło
jak to osiągnąć w chrome?
Null Pointer
4

jak wydrukować tabelę HTML. Nagłówek i stopka na każdej stronie

Działa również w przeglądarkach 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
źródło
Po prostu pracuj na komputerze Chrome. Chrome/Safari na iPhonie nie działa!
Devin Gong