Как бороться с разрывами страниц при печати больших таблиц HTML - PullRequest
Новая
       85

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

248 голосов
/ 19 ноября 2009

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

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

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

Ответы [ 11 ]

263 голосов
/ 19 ноября 2009 
<!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>
41 голосов
/ 14 октября 2011

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

<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>
20 голосов
/ 11 сентября 2013

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

<!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>

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

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

9 голосов
/ 15 ноября 2013

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

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

6 голосов
/ 19 ноября 2009

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

page-break-after

page-break-before

Например: 

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

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

через

4 голосов
/ 30 июня 2015

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

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();
}

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

1 голос
/ 22 июня 2016

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

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

<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>

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

0 голосов
/ 06 июля 2017

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

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-й главе (т. Е. Исходной голове) при разрыве страницы.

0 голосов
/ 13 марта 2017

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

<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>

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

0 голосов
/ 29 июля 2015

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

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

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;	
  height: 130px;
}
<TFOOT  class='placer'> 
  <TR>
    <TD>
      <!--  empty here
-->
    </TD>
  </TR>
</TFOOT>	
<TFOOT  class='contenter'> 
  <TR>
    <TD>
      your long text or high image here
    </TD>
  </TR>
</TFOOT>

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...