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

218

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

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

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

источник

2009-11-19 h3.

+21

По касательной, возможно, стоит добавить '' в вашу таблицу со следующим css 'thead {display: table-header-group; } ', чтобы напечатать заголовок таблицы на всех последующих страницах (полезно для таблиц данных loooooong). –

218

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tbody> 
     <tr> 
      <td>x</td> 
     </tr> 
     <tr> 
      <td>x</td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

источник

2009-11-19 14:31:42

Это не работает во всех браузерах. Кажется, он работает в FireFox 3.6 Mac OS. – daustin777

К сожалению, это не работает в FF4 @ W7 –

+14

Это также не работает в браузерах WebKit (например, Safari и Chrome). –

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

page-break-after 

page-break-before

Например:

<html> 
<head> 
<style> 
@media print 
{ 
table {page-break-after:always} 
} 
</style> 
</head> 

<body> 
.... 
</body> 
</html>

via

источник

2009-11-19 14:26:00 marcgg

Он работает на строках таблицы? –

Я не уверен, вам нужно будет проверить. Если нет, разделите на разные массивы и разделите массивы на пустой div – marcgg

(или на элемент «table»). – marcgg

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

<html> 
<head> 
<style> 
@media print 
{ 
    table { page-break-after:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    td { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
} 
</style> 
</head> 

<body> 
.... 
</body> 
</html>

источник

2011-10-14 05:07:46

Большое вам спасибо! Это единственное, что сработало! – Maria

Работает для меня на Chrome и является хорошим простым решением для CSS. – Ryan

Расширение из Синан Ünür решения:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    div { page-break-inside:avoid; } /* This is the key */ 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

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

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

источник

2013-09-11 14:03:43 vicenteherrera

Вот простой способ динамически добавлять divs с помощью jquery: '$ (document) .ready (function() {$ (" table tbody th, table tbody td "). WrapInner ("

");});' –

Спасибо @ Chrisbloom7, что может быть очень полезно! ;-) – vicenteherrera

Благодаря sinan ürün, vicenteherrera и Chrisbloom7. Я применил комбинацию ваших ответов, и теперь она работает! –

Ни один из ответов здесь не работал для меня в Chrome. AAverin на GitHub создал some useful Javascript for this purpose, и это сработало для меня:

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

источник

2013-11-15 16:25:21 MDave

У вас есть образец того, как применить это? Я пытаюсь присвоить свой класс className как 'splitForPrint', но в JS нет нигде, чтобы получить ссылку на элемент, используя className' splitForPrint'. Только часть, где 'var splitClassName = 'splitForPrint';', но это все. –

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

не работает на Chrome v39 на Mac – sirjay

-2

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

tr  
{ 
    display: table-row-group; 
    page-break-inside:avoid; 
    page-break-after:auto; 
}

HTML-структура:

<table> 
    <thead> 
    <tr></tr> 
    </thead> 
    <tbody> 
    <tr></tr> 
    <tr></tr> 
    ... 
    </tbody> 
</table>

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

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

#theTable td * 
{ 
    page-break-inside:avoid; 
}

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

источник

2015-04-01 19:20:14

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

Css:

.avoidBreak { 
    border: 2px solid; 
    page-break-inside:avoid; 
}

Js:

function Print(){ 
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") }); 
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>"); 
    window.print(); 
}

работает как шарм!

источник

2015-06-30 15:25:53

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

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

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

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

Давайте соберем два TFOOT:

TFOOT.placer { 
 
    display: table-footer-group; 
 
    height: 130px; 
 
} 
 

 
TFOOT.contenter { 
 
    display: table-footer-group; 
 
    position: fixed; 
 
    bottom: 0px; \t 
 
    height: 130px; 
 
}

<TFOOT class='placer'> 
 
    <TR> 
 
    <TD> 
 
     <!-- empty here 
 
--> 
 
    </TD> 
 
    </TR> 
 
</TFOOT> \t 
 
<TFOOT class='contenter'> 
 
    <TR> 
 
    <TD> 
 
     your long text or high image here 
 
    </TD> 
 
    </TR> 
 
</TFOOT>

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

источник

2015-07-28 23:58:08

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

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

<style> 
    @media print { 
     /* avoid cutting tr's in half */ 
     th div, td div { 
      margin-top:-8px; 
      padding-top:8px; 
      page-break-inside:avoid; 
     } 
    } 
</style> 
<script> 
    $(document).ready(function(){ 
     // Wrap each tr and td's content within a div 
     // (todo: add logic so we only do this when printing) 
     $("table tbody th, table tbody td").wrapInner("<div></div>"); 
    }) 
</script>

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

источник

2016-06-22 17:15:32 Aaron

-1

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

<table> 
    <thead> <!-- there should be <thead> tag--> 
     <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>--> 
    </thead> 
    <tbody><!---<tbody>also must--> 
     <tr> 
      <td>data</td> 
     </tr> 
     <!--100 more rows--> 
    </tbody> 
</table>

Над формата проверен и работает в кроссе-браузерах

источник

2017-03-13 06:42:30

не работал для хрома (как минимум) – AriWais

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

HTML

<table> 
    <thead> 
    <tr> 
    <th style="border:none;height:26px;"></th> 
    <th style="border:none;height:26px;"></th> 
    . 
    . 
    </tr> 
    <tr> 
    <th style="border:1px solid black">ABC</th> 
    <th style="border:1px solid black">ABC</th> 
    . 
    . 
    <tr> 
    </thead> 
<tbody> 

    //YOUR CODE 

</tbody> 
</table>

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

источник

2017-07-06 07:41:53 Aneesh

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

ответ

Смежные вопросы