Печать заголовка для каждой страницы в Google Chrome

Я создаю ТВ-расписание и не должен иметь проблем с печатью, по крайней мере, для одного стандартного браузера.

Мне нужно разместить логотип и заголовок плюс заголовки таблиц на каждой странице, после нескольких дней поиска и поиска я узнал, что Chrome не будет печатать заголовки таблиц и position: fixed элементов на каждой странице из-за этого известная ошибка.

Из-за возможностей, таких как печать цвет фона с помощью -webkit-print-color-adjust: exact, который я сильно использовал и изменяющий границы страницы с помощью свойства CSS @page, я настроил свое представление на использование Google Chrome, но теперь, когда я его вижу не могу печатать заголовки Я ищу альтернативы, которые:

  • Чтобы забыть Chrome и начать создание вида печати для другого браузера, который должен делать твики для печати цветов фона и изменения полей страницы (я боюсь, что это невозможно).
  • Чтобы найти решение CSS/JS, чтобы заставить Chrome Chrome печатать заголовки таблиц на каждой странице.

TL; DR: Знаете ли вы jQuery/JavaScript/etc. код для печати заголовков таблиц на каждой странице в Chrome?

Ответы

Ответ 1

Да, это вещь Webkit/Chrome. Он не будет печатать thead на каждой странице. Например, FF. Что вы можете сделать для достижения чего-то подобного, это использовать разрывы страниц.

Разрыв страницы работает только с элементами блока, поэтому вы должны соответственно подстроить свой тр.

Вот так:

tr{
    display:block;
}

Теперь вы должны начать копировать свой thead и вставлять его в каждую X-ю строку с помощью javascript:

var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());

На экране вам не нужны все эти главы. Удалите их с помощью медиа-запроса (для удобства я добавил класс .head в моей строке th > tr.:

@media screen {
    tbody .head{
        display: none;
    }
}

Теперь перед каждым .head выполните разрыв страницы:

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

Проверьте это: http://jsfiddle.net/jaap/7ZGVv/2/ Имейте в виду, что jsfiddle не позволяет вам открывать только рамку предварительного просмотра, поэтому печать не работает, объедините все в свой собственный файл, и вы увидите, что таблицы будут разбиты, стилизация не идеальна, и это не так. как ваш браузер сам решает, где разделить, но эй, это что-то.

Ответ 2

Это должен быть комментарий, но у меня нет репутации. Во всяком случае, я разместил здесь решение, которое решает эту проблему и не требует от вас попыток прервать естественные разрывы страниц с принудительными перерывами страницы (техника, которая по своей сути ненадежна и имеет тенденцию к макулатуре).

Ответ 3

Это решение не будет работать точно для заголовков таблиц, но это позволит создавать заголовки произвольного html. Я создал библиотеку, которая позволяет Chrome печатать верхние и нижние колонтитулы, см. Этот ответ:

fooobar.com/info/18579/...