У меня есть ряд проблем с печатью HTML-страницы.Я провел некоторое время и пробовал разные решения, но ни одно из них не работает.
http://jsfiddle.net/kasheftin/vj7hr1cg/1/ - вот таблица, которую я хочу напечатать.Я максимально упростил это.Он не помещается на одной странице, и цель состоит в том, чтобы избежать разрыва страницы внутри содержимого строки.
Также я хочу, чтобы внизу каждой напечатанной страницы был какой-то пользовательский текст, например «страница 1 из 10».
Вот текущий результат:
Как мы видим, последняя ячейка не умещается на странице, у нее нет нижней границы, номер страницы печатается как 1/5 вместо указанного «1 из 5»в css.
Вот что я попробовал до сих пор:
Каждая строка с rowspan имеет -primary имя класса.Избегать разрывов страниц в любом месте, кроме таких строк:
.b-rtable__row, .b-rtable__cell {
page-break-inside: avoid !important;
}
.b-rtable__row {
page-break-before: avoid !important;
page-break-after: avoid !important;
}
.b-rtable__row.-primary {
page-break-before: auto !important;
}
Переносит содержимое каждой ячейки в .b-rtable__container div, который занимает всю ячейку и позволяет избежать разрыва страницы:
.b-rtable__row {
height: 1px; // Fix for 100% height;
}
.b-rtable__cell {
height: inherit;
}
.b-rtable__container {
width: 100%;
height: 100%;
page-break-inside: avoid !important;
position: relative; // tried with and without that rule;
display: table; // tried with and without that rule;
}
Добавленоэти правила для рисования пользовательского page 1 of 10 текста внизу каждой страницы, но он не отображается:
@page {
size: auto;
@bottom-center {
content: "page " counter(page) " of " counter(pages);
}
}