Test

Как справляться с разрывами страниц при печати большой таблицы HTML

У меня есть проект, который требует печати таблицы HTML со многими строками.

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

Единственное правдоподобное решение, о котором я могу думать, — это использовать сложные DIVs вместо таблицы и принудительные разрывы страниц, если это необходимо.. но перед тем как пройти через все изменения, я подумал, что могу спросить здесь раньше.

ОТВЕТЫ

Ответ 1

     table < page-break-inside:auto >tr < page-break-inside:avoid; page-break-after:auto >thead < display:table-header-group >tfoot  
 
heading
 
 
notes
 
 
 
x
 
 
x
 
  
x
 
 
 
   

Ответ 2

Примечание: при использовании разрыва страницы: всегда для тега он создает разрыв страницы после последнего бит таблицы, каждый раз создавая абсолютно пустую страницу! Чтобы исправить это, просто измените его на page-break-after: auto. Он сломается правильно и не создаст лишнюю пустую страницу.

     .  

Ответ 3

Расширение от решения Синан Юнюр:

     table < page-break-inside:auto >div < page-break-inside:avoid; >/* This is the key */ thead < display:table-header-group >tfoot  
 
heading
 
 
notes
 
 
Long
cell
should'nt
be
cut
 
 
Long
cell
should'nt
be
cut
 
  
x
 
 
 
   

Кажется, что page-break-inside:avoid в некоторых браузерах учитывается только для элементов блока, а не для ячейки, таблицы, строки или встроенного блока.

Если вы попытаетесь display:block тег TR и используйте там page-break-inside:avoid , это работает, но портится ваш макет таблицы.

Ответ 4

Ни один из ответов здесь не работал у меня в Chrome. AAverin на GitHub создал полезный Javascript для этой цели, и это сработало для меня:

Просто добавьте js к вашему коду и добавьте класс splitForPrint в таблицу, и он аккуратно разделит таблицу на несколько страниц и добавит заголовок таблицы на каждую страницу.

Ответ 5

Используйте эти свойства CSS:

page-break-after page-break-before 

Ответ 6

Я недавно решил эту проблему с хорошим решением.

function Print()< $(".tableToPrint td, .tableToPrint th").each(function()< $(this).css("width", $(this).width() + "px") >); $(".tableToPrint tr").wrap(" "); window.print(); > 

Ответ 7

В конце концов я столкнулся с подходом @vicenteherrera, с некоторыми настройками (которые, возможно, связаны с бутстрапом 3).

В принципе; мы не можем сломать tr s или td , потому что они не являются элементами уровня блока. Поэтому мы вставляем div в каждый и применяем наши правила page-break-* к div . Во-вторых, мы добавляем некоторые дополнения к вершине каждого из этих divs, чтобы компенсировать любые артефакты стиля.

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

Ответ 8

Я проверил множество решений, и никто не работал хорошо.

Итак, я попробовал небольшой трюк, и он работает:

tfoot со стилем: position: fixed; bottom: 0px; помещается внизу последней страницы, но если нижний колонтитул слишком высок, он перекрывается содержимым таблицы.

tfoot только: display: table-footer-group; не перекрывается, но не находится в нижней части последней страницы.

TFOOT.placer < display: table-footer-group; height: 130px; >TFOOT.contenter

    your long text or high image here  

Ответ 9

Я сталкивался с одной и той же проблемой и всюду искал решение, наконец-то я нашел то, что работает для меня во всех браузерах.

используйте этот CSS или вместо CSS вы можете иметь этот JavaScript

Надеюсь, это сработает и для вас.

Ответ 10

Я пробовал все приведенные выше предложения и нашел простое и работающее решение для кросс-браузера для этой проблемы. Для этого решения нет стилей или разрывов страниц. Для решения формат таблицы должен быть следующим:

  tag-->  should be 
 
Heading
it should not be -->
  
data
 
 
 

Вышеперечисленный формат и работа в кросс-браузерах

Ответ 11

Ну парни. Большинство решений здесь не сработало. Так вот как все сработало для меня..

Первый набор головок используется как фиктивный, так что не будет отсутствующей верхней границы в 2-й главе (то есть исходной голове) во время разрыва страницы.

Ответ 12

Принятый ответ не работал у меня во всех браузерах, но после этого css работал у меня:

В моем случае возникли некоторые дополнительные проблемы с thead tr , но это разрешило исходную проблему с тем, чтобы строки таблицы не ломались.

Из-за проблем с заголовком я в конечном итоге закончил:

Это не помешало разрыву строк; только содержимое каждой ячейки.

Источник

page-break-inside

CSS свойство page-break-inside определяет наличие или отсутствие разрыва страницы внутри элемента и используется при печати или для предварительного просмотра печати.

Свойство нельзя использовать с абсолютно позиционированными элементами.

Используйте свойства для разрыва страницы как можно реже и избегайте применения этих свойств внутри таблиц, плавающих элементов и блочных элементов с рамкой.

Значение по умолчанию:	auto
Применяется:	к блочным элементам, которые находятся в нормальном потоке элементов
Анимируется:	нет
Наследуется:	нет
Версия:	CSS2
Синтаксис JavaScript:	object.style.pageBreakInside=»avoid»

Синтаксис

page-break-inside: auto|avoid|inherit;

Значения свойства

Значение	Описание
auto	Вставляет разрыв страницы внутри элемента при необходимости.
avoid	Запрещает разрыв страницы внутри элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

       
В данном примере свойство page-break-inside указывает, 
что разрыв страницы внутри элемента "таблица" запрещен.
 
ячейка 1
ячейка 2
 
   

Результат данного примера в окне браузера:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

Как добиться разрыва страницы в HTML-таблице для Google Chrome?

Но когда я запускаю и проверяю элемент, его поглаживают по умолчанию. Каким будет решение? Есть много сообщений, которые я искал. Говорят, что последние версии не поддерживают разрывы страниц. Если это правда, то какое еще решение для достижения разрыва страницы в Google Chrome?

если вы можете опубликовать пример с помощью www.jsbin.com, это поможет любому, кто придет с предложением.

@MohammadAreebSiddiqui ты проверил мой предыдущий код? Я попробовал то, что вы описали, но этот динт работал на меня. пожалуйста, проверьте мой код и скажите мне, если что-то не так с этим.

Наконец я решил эту проблему. Я сделал `tr ` и затем исправил интервал между ячейками. разрыв страницы работает только на элементах уровня блока.

5 ответов

Наконец, я решил эту проблему. Я сделал tr и затем я установил интервал между ячейками.

Разрыв страницы работает только с элементами уровня блока.

Браузеры WebKit не поддерживают это свойство; но некоторые из них нестандартный -webkit-column-break-after и -webkit-region-break-after с аналогичными параметрами, такими как перерыв страницы.

Поэтому вам нужно использовать page-break-after с некоторым значением, которое вам подходит лучше всего. Вот некоторые из них:

Свойство CSS с разбивкой по страницам корректирует разрывы страниц после текущий элемент.

авто: Начальное значение. Автоматические разрывы страниц (ни принудительные, ни запрещенные).

всегда: Всегда заставляйте разрывы страниц после элемента.

избегать: Избегайте разрывов страниц после элемента.

левый: Сила страницы разрывается после элемента, так что следующая страница отформатирована как левая страница.

право: Сила страницы разрывается после элемента, так что следующая страница отформатирована как правая страница.

Вы также можете использовать свойство break-after :

Свойство CSS после разрыва описывает, как страница, столбец или область после создания сгенерированного окна. Если нет сгенерированного окна, свойство игнорируется.

ты проверил мой предыдущий код Я попробовал то, что вы описали, но этот динт работал на меня. пожалуйста, проверьте мой код и скажите мне, если что-то не так с этим.

Наконец я решил эту проблему. Я сделал `tr ` и затем исправил интервал между ячейками. разрыв страницы работает только на элементах уровня блока.

Вам может потребоваться разбить таблицу на несколько частей и установить для свойства page-break-after css always . Это работает (с бета-версией Chrome), я не знаю, есть ли способ сделать это в непрерывной таблице.

Разве вы не можете вставить разделить каждые х строк? Серверная или клиентская сторона? С некоторыми хитростями CSS, не может быть никакой видимой разницы.

Я не уверен насчет содержимого строки, потому что несколько строк могут содержать больше данных, чем другие. все строки даже не в размере, вот в чем проблема.

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

Источник

page-break-after

Internet Explorer и Firefox не поддерживают значения свойства «left» и «right».

Описание

CSS свойство page-break-after определяет наличие или отсутствие разрыва страницы после заданного элемента и используется при печати или для предварительного просмотра печати.

Свойство нельзя использовать с абсолютно позиционированными элементами.

Используйте свойства для разрыва страницы как можно реже и избегайте применения этих свойств внутри таблиц, плавающих элементов и блочных элементов с рамой.

Значение по умолчанию:	auto
Применяется:	к блочным элементам, которые находятся в нормальном потоке элементов
Анимируется:	нет
Наследуется:	нет
Версия:	CSS2
Синтаксис JavaScript:	object.style.pageBreakAfter=»always»

Синтаксис

page-break-after: auto|always|avoid|left|right|inherit;

Значения свойства

Значение	Описание
auto	Вставляет разрыв страницы после элемента при необходимости.
always	Всегда делает разрыв страницы после элемента.
avoid	Запрещает разрыв страницы после элемента.
left	Делает разрыв страницы после элемента таким образом, что следующая(левая) страница будет чистой.
right	Делает разрыв страницы после элемента таким образом, что следующая(правая) страница будет чистой.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

       
Пример использования свойства page-break-after
 
ячейка 1
ячейка 2
 
 
Этот элемент будет отсутствовать при предварительном просмотре печати и распечатан на следующей странице.
   

Результат данного примера в окне браузера:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник

page-break-after¶

Это свойство было заменено свойством break-after .

Свойство page-break-after добавляет разрыв страницы при печати документа после заданного элемента.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13

/* Keyword values */ page-break-after: auto; page-break-after: always; page-break-after: avoid; page-break-after: left; page-break-after: right; page-break-after: recto; page-break-after: verso; /* Global values */ page-break-after: inherit; page-break-after: initial; page-break-after: unset; 

Значения¶

always Всегда добавляет разрыв страницы после элемента. auto Вставляет разрыв страницы при необходимости. avoid Запрещает разрыв страницы после элемента. left Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной. right Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.

Значение по-умолчанию: auto

Применяется к блочным элементам

Спецификации¶

Поддержка браузерами¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

 html> head> meta charset="utf-8" /> title>page-break-aftertitle> style> @media print  .more  page-break-after: always; > > style> head> body> h2>Мусорные пакетыh2> p> История о том, как однажды мусорных пакетов оказалось несколько больше, чем хотелось, как и для чего их можно использовать, и что из этого получилось. p> p class="more">Читать дальшеp> body> html> 

Источник