Повторять заголовки таблицы в режиме печати
Возможно ли в CSS с помощью свойства внутри @page сказать, что заголовки таблицы (th) должны повторяться на каждой странице, если таблица распространяется на несколько страниц?
Ответы 6
Для этого нужен элемент THEAD. Официальные документы здесь.
Я успешно использовал это в Firefox.
Как обычно, для этого требуется исправный браузер - см. Комментарий jishi.
Эти комментарии довольно старые. По состоянию на 13.03.13 ленивая выборочная проверка показывает, что он работает в последнем IE10 и даже в почтенном IE8 ...
..но не Chrome. (см. следующий ответ). Глядя на систему отслеживания проблем, похоже, что наконец-то появилась какая-то тяга к этому.
Наконец, Chrome поддерживает повторяющиеся заголовки таблиц для печатных СМИ. Это включено, если у th есть break-inside:avoid, и может быть отключено с помощью break:inside: auto. См. codereview.chromium.org/2021703002/#ps20001
@tvanfosson Он работает нормально, но есть ли ограничение по высоте заголовка, для которого должен работать повторяющийся заголовок? В моем случае он перестает работать, когда высота заголовка больше.
Работает как шарм для рендеринга PDF на стороне сервера с использованием кукловода (который открывает хромированную страницу без заголовка и использует функцию печати в формате PDF из хрома).
содержание перекрывается с повторением th
Некоторые браузеры повторяют элемент thead на каждой странице, как и предполагалось. Другим нужна помощь: добавьте это в свой CSS:
thead {display: table-header-group;}
tfoot {display: table-header-group;}
Opera 7.5 и IE 5 не будут повторять заголовки, что бы вы ни пытались.
(source)
Также нет "Летающей тарелки", которую я использую для создания PDF-файла. Я также задам этот вопрос в списке рассылки «Летающая тарелка», чтобы узнать, есть ли другой способ сделать это.
Последние версии Chrome и Safari в настоящее время этого не делают. См. В моем ответе ссылки на их средства отслеживания проблем.
мать божья, в то время, когда это писалось, IE5 еще что-то было?
Я только что попробовал пример thead в моем CSS (совместимом с IE7), и он действительно повторяет заголовки, когда я делаю предварительный просмотр печати. Спасибо. Но я вижу реплицированную строку вверху следующей страницы. Почему?
Летающая тарелка xhtmlrenderer повторяет THEAD на каждой странице вывода PDF, если вы добавите в свой CSS следующее:
table {
-fs-table-paginate: paginate;
}
(Работает, по крайней мере, с выпуска R8.)
Это как раз то, что я искал. Спасибо!
Потрясающий! (ссылка мертвая: /)
Потрясающий! Спасибо!
Прежде чем реализовывать это решение, важно знать, что Webkit в настоящее время этого не делает.
Вот соответствующая проблема в системе отслеживания проблем Chrome: http://code.google.com/p/chromium/issues/detail?id=24826
И в системе отслеживания проблем Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205
Пометьте его в системе отслеживания проблем Chrome, если вы хотите показать, что это важно для вас (я так и сделал).
Спасибо за это - у меня бы сильно заболела голова, если бы я не прокрутил страницу вниз.
И почти 4 года спустя (и 8 лет с тех пор, как была подана жалоба на WebKit), это все еще актуально!
Браузеры Chrome и Opera не поддерживают thead {display: table-header-group;}, но остальные поддерживают его должным образом.
как этого добиться в хроме?
как распечатать 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 не работает!
Я не думал об этом, но на практике это не работает.