Повторять заголовки таблицы в режиме печати

101

Возможно ли в CSS с помощью свойства внутри @page сказать, что заголовки таблицы (th) должны повторяться на каждой странице, если таблица распространяется на несколько страниц?

css css-tables Avernet
источник

Ответы:

109

Для этого и нужен элемент THEAD . Официальные документы здесь .

tvanfosson
источник
1
Я не думал об этом, но на практике это не работает.
avernet
1
Я успешно использовал это в Firefox.
jishi
5
Как обычно, для этого требуется исправный браузер - см. Комментарий jishi.
Питер Роуэлл
9
Эти комментарии довольно старые. По состоянию на 13.03.13 ленивая выборочная проверка показывает, что он работает в последнем IE10 и даже в почтенном IE8 ...
Натан,
8
Наконец, Chrome поддерживает повторяющиеся заголовки таблиц для печатных СМИ. Он включен, если есть break-inside:avoid, и может быть отключен с помощью break:inside: auto. См. Codereview.chromium.org/2021703002/#ps20001
Алекс Осборн,
71

Некоторые браузеры повторяют theadэлемент на каждой странице, как и положено. Другим нужна помощь: добавьте это в свой CSS:

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

Opera 7.5 и IE 5 не будут повторять заголовки, что бы вы ни пытались.

( источник )

Nickf
источник
Также нет "Летающей тарелки", которую я использую для создания PDF-файла. Я также задам этот вопрос в списке рассылки «Летающая тарелка», чтобы узнать, есть ли другой способ сделать это.
avernet
7
Последние версии Chrome и Safari в настоящее время этого не делают. См. В моем ответе ссылки на их средства отслеживания проблем.
Ник Ноулсон,
1
мать божья, в то время, когда это писалось, IE5 еще был чем-то?
igorsantos07 05
Я только что попробовал этот theadпример в своем CSS (совместимом с IE7), и он повторяет заголовки, когда я делаю предварительный просмотр. Спасибо. Но я вижу реплицированную строку вверху следующей страницы. Зачем?
Эндрю Тракл,
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 07
4
И почти 4 года спустя (и 8 лет с тех пор, как была подана жалоба на WebKit), это все еще актуально!
jcaron
41

Flying Saucer xhtmlrenderer повторяет THEAD на каждой странице вывода PDF, если вы добавите следующее в свой CSS:

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

(Работает, по крайней мере, с выпуска R8.)

Ээро
источник
4
Это как раз то, что я искал. Спасибо!
Alex
Потрясающие! (ссылка мертвая: /)
Кирилл Н.
Потрясающие! Спасибо!
Фрисон Александр
6

Браузеры Chrome и Opera не поддерживают, thead {display: table-header-group;}но остальные поддерживают должным образом.

СантошК
источник
как этого добиться в хроме?
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 не работает!
Девин Гонг