Baskı modunda tablo başlıklarını tekrarlayın


101

CSS'de bir @page içinde bir özellik kullanarak, tablo birden fazla sayfaya yayılıyorsa, tablo başlıklarının (th) her sayfada tekrarlanması gerektiğini söylemek mümkün müdür?

Yanıtlar:


109

Bu nedir Thead elemanı içindir. Resmi dokümanlar burada .


1
Bunu düşünmedim ama pratikte işe yaramıyor gibi görünüyor.
— avernet

1
Bunu Firefox'ta başarıyla kullandım.
— jishi

5
Her zaman olduğu gibi, bozuk olmayan bir tarayıcı gerektirir - jishi'nin yorumuna bakın.
— Peter Rowell

9
Bu yorumlar oldukça eskidir. 13.03.2013 itibariyle tembel nokta kontrolü, en son IE10'da ve hatta saygıdeğer IE8'de çalıştığını gösteriyor ...
— Nathan 13

8
Chrome sonunda, baskı medyası için tekrarlanan tablo başlıklarını desteklemektedir. Bu, varsa etkinleştirilir break-inside:avoidve ile devre dışı bırakılabilir break:inside: auto. Bkz. Codereview.chromium.org/2021703002/#ps20001
— Alex Osborn

71

Bazı tarayıcılar thead, olması gerektiği gibi her sayfada öğeyi tekrarlar . Diğerlerinin biraz yardıma ihtiyacı var: Bunu CSS'nize ekleyin:

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

Opera 7.5 ve IE 5, ne denerseniz deneyin başlıkları tekrarlamaz.

( kaynak )


PDF oluşturmak için kullandığım Flying Saucer da öyle. Bunu yapmanın başka bir yolu olup olmadığını görmek için bu soruyu Flying Saucer posta listesinde de soracağım.
— avernet

7
Chrome ve Safari'nin en son sürümleri de şu anda bunu yapmıyor. Sorun izleyicilerine bağlantılar için cevabıma bakın.
— Nick Knowlson

1
tanrının annesi, bu yazıldığı sırada IE5 hala bir şey miydi?
— igorsantos07

theadÖrneği CSS'imde denedim (IE7 uyumlu) ve baskı önizlemesi yaptığımda başlıkları tekrar ediyor. Teşekkür ederim. Ancak, sonraki sayfanın en üstünde çoğaltılmış bir satır görüyorum. Neden?
— Andrew Truckle

45

Bu çözümü uygulamadan önce, Webkit'in şu anda bunu yapmadığını bilmek önemlidir.

Chrome sorun izleyiciyle ilgili sorun şu şekildedir: http://code.google.com/p/chromium/issues/detail?id=24826

Ve Webkit sorun izleyicisinde: https://bugs.webkit.org/show_bug.cgi?id=17205

Sizin için önemli olduğunu göstermek istiyorsanız Chrome sorun izleyicisine yıldız ekleyin (ben yaptım).


1
Bunun için teşekkürler - aşağı inmeseydim, bu bende büyük bir baş ağrısına neden olurdu.
— Seiyria

4
Ve yaklaşık 4 yıl sonra (ve WebKit sayısının açılmasının üzerinden 8 yıl geçti), durum hala böyle!
— jcaron

41

Flying Saucer xhtmlrenderer , CSS'nize aşağıdakileri eklerseniz, THEAD'ı PDF çıktısının her sayfasında tekrarlar:

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

(En azından R8 sürümünden beri çalışıyor.)


4
Tam da aradığım buydu. Teşekkür ederim!
— Alex

Harika! (bağlantı kesildi: /)
— Cyril N.

Harika! Teşekkürler!
— Frison Alexander

6

Chrome ve Opera tarayıcıları desteklemez thead {display: table-header-group;}ancak diğer tarayıcılar düzgün şekilde destekler ..


bunu chrome'da nasıl başarabilirim?
— Null Pointer

4

HTML tablosunu nasıl yazdırırım. Her sayfada üst bilgi ve alt bilgi

Webkit Tarayıcılarında da Çalışın

<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>

Sadece masaüstü chrome.Chrome/Safari üzerinde çalışın iphone'da çalışmıyor!
— Devin Gong
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.