Печать таблицы HTML с большим количеством столбцов / строк с использованием макета CSS?
Я хочу напечатать большую таблицу (настолько большую, что ее строки составляют около 3 листов бумаги) из HTML. Если возможно, CSS должен быть достаточно для верстки, и решение должно работать с различными браузерами.
В настоящее время я определяю следующие правила стиля:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
Когда я проверяю элементы DOM, например в Firefox 33.0.2 (в OS X) я вижу, что правила распознаются, но потом, когда я смотрю на предварительный просмотр (файл | Распечатать | PDF | Открыть PDF в Preview) все столбцы, которые не помещаются на первой странице, обрезаются, т. е. я получаю 1 страницу печатного вывода вместо 3. Я также пробовал Internet Explorer 11 и 10 с тем же эффектом.
Итак, как я могу расположить большие HTML-таблицы (в конечном счете, большие с точки зрения столбцов и строк) для печати с использованием CSS?
Дополнительный вопрос: если компоненты стиля разрыва страницы действительно применяются только к элементам уровня блока, как указано вэтот предыдущий ответ, поможет ли это, если я построю свой стол изdiv
с вместоtd
s при стремлении к выводу на печать?
ОБНОВИТЬ
Вот соответствующий пример, который я только что попробовал на JSFiddle. (У меня там нет учетной записи, поэтому FWIK я не могу предоставить прямую ссылку.)
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
Если я пытаюсь распечатать эту таблицу (например, применяяЭтот кадр | Рамка для печати ... | PDF | Открыть PDF в Preview к JSFiddle'sРезультат просмотреть в Firefox 33.1 для OS X и для формата бумаги / ориентации A4 / портрет) я получаю одну страницу вывода. Все столбцы, кроме первого и второго, обрезаются.