Как напечатать table на нескольких листах?

Question

[Мурад Джелилов]

Добрый день. На странице имеется элемент table. При печати, если он не помещается на одном листе, то строка делится по полам и первая часть оказывается в конце первого листа, а вторая в начале второго листа.
Высота строк таблицы всегда разная. Как сделать, чтобы строка если не помещается на листе, переводилась на другой лист целиком?

Comments

[Lynn «Кофеман»]

В стандарте CSS есть несколько правил для разбиения по страницам. www.w3.org/TR/CSS21/page.html#page-breaks

[Мурад Джелилов]

@Lynn чем переносить я знаю. А вот узнать, в какое место его "запихнуть"? как узнать, что страница заканчивается на 10 строке, а не на 15 например?

[Lynn «Кофеман»]

Пишите
td { page-break-inside: avoid }

и надейтесь на лучшее

[Мурад Джелилов]

@Lynn лучшее не произошло :D

Answer 1

[Дмитрий Скогорев]

page-break-inside: avoid

для tr

Answer 2

[Евгений Петров]

Для современных браузеров должно работать предложенное @EnterSandman
tr{page-break-inside: avoid;}

Увы, для webkit конкретно для display:table-xxx не работает. Работает для display:block, но ставить это для всех tr — чистой воды самоубийство.

Только JS-решения — определять высоту кусков таблицы и... Например, втыкать в месте разрыва tr (здесь с классом devide)

.devide{
	display:none;
	page-break-after:always;
}
.devide td{
	display:none;
}
@media print{
	.devide{
		display:block;
	}
}

Кстати, и thead, и tfoot при печати на каждом листе webkit также не выведет.

Comments

[Мурад Джелилов]

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

[Мурад Джелилов]

*там лишенее НЕ получилось

[Евгений Петров]

@dmuradz можно и без цикла — есть такая штука Document.elementFromPoint().

[Мурад Джелилов]

@Petroveg если честно, не понял как этим пользоваться

[Евгений Петров]

@dmuradz у вас есть координаты таблицы (top, left, width) и предполагаемая высота печатаемой области.

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

Если TR — берём ординату верхнего края и между этой строкой и предыдущей вставляем строку-разделитель. Прибавляем высоту области к полученной ординате и так пока не кончится высота документа.

Способ убогий, потому что:
1. Неясно, какая же высота области печати. Мало того, что нужно отслеживать margings и другие параметры, которые могут быть заданы в CSS, так ещё и человек может выбрать как формат печати (portrait / landscape), так и формат листа (А3, А5 и т.д.).

2. Элементы, попавшиеся на границах перед таблицей, нужно исследовать на предмет всевозможных page-xxx. Причём правила эти могут быть записаны с определением медиа-типа.

Итого — затея с JS нереально затратная и абсолютно не гарантирующая успех. Можно попробовать найти среди библиотек — вдруг кто уже решил задачу. Например, вот список, но наверняка есть и другие.

Answer 3

[Александр N++]

Задайте для таблице при распечатке отдельный css и выберите оптимальное количество строк для таблице.

При распечатывание страницы можно задать отдельный css, который позволяет все не нужное скрыть оставить только важное!

<link media="print, handheld" rel="stylesheet" href="print.css">

Или

@media print {
}

в общем набросал побыстрому )

jsfiddle.net/g210px60/1

Можно через JS делить талицу большую и формировать html для распечатки

Comments

[Мурад Джелилов]

для печати таблиц есть отдельные стили через @media print.
через js расчитывать высоту строк, сравнивать с печатаемой области страницы, если строка выходит то переносим на новый лист. Так?

[Александр N++]

Да именно так через js. Но учтите этот способ работает если пользователь нажал на кнопку распечатать и мы формируем список через js сами.

[Мурад Джелилов]

@sanchezzzhak не понял. если таблица уже напечатанная(через php), то работать не будет?

[Александр N++]

Если сделали кнопку распечатать и через JavaScript формируете документ для принтера то будет работать.
Не будет работать в таком случаи:
Когда пользователь нажимает в браузере Файл -> принтер или гор.Клавиша ctrl+p

Поэтому самый оптимальный вариант делать все через СSS

[Мурад Джелилов]

@sanchezzzhak а понятно)
спасибо, наверное воспользуюсь этим способом

Answer 4

[Виталий Желтяков]

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

Comments

[Мурад Джелилов]

не понял? каким образом я узнаю что закончился первый лист, закрою таблицу и открою новую?

[Виталий Желтяков]

@dmuradz Таблицы выравнивают строки под размеры таблицы. Соответственно, Вам нужно сформировать таблицу со минимальным по контенту числом строк. Она автоматически выравниться

[Мурад Джелилов]

@VitaZheltyakov т.е. мне через каждые (например) 10 строк закрывать таблицу, ставить перенос на новый лист и печатать новую таблицу?

[Виталий Желтяков]

@dmuradz да, именно так.