Jak radzić sobie z przerwami na stronie podczas drukowania dużej tabeli HTML

Question

Jak radzić sobie z przerwami na stronie podczas drukowania dużej tabeli HTML

Mam projekt, który wymaga wydrukowania tabeli HTML z wieloma wierszami.

Moim problemem jest sposób drukowania tabeli na wielu stronach. Czasami wiersz tnie się na pół, co czyni go nieczytelnym, ponieważ jedna połowa znajduje się na krwawiącej krawędzi strony, a pozostała część jest drukowana na górze następnej strony.

Jedynym wiarygodnym rozwiązaniem, jakie mogę wymyślić, jest użycie ułożonych Div zamiast tabeli i wymuszenie łamania stron w razie potrzeby.. ale zanim przejdę przez całą zmianę ... pomyślałem, że mogę zapytać tutaj wcześniej.

236

html css printing html-table

Author: Jeremy W, 2009-11-19

Source

11 answers

Uwaga: Podczas używania znacznika page-break-after: always dla tagu tworzy on podział strony po ostatnim bitie tabeli, tworząc całkowicie pustą stronę na końcu za każdym razem! Aby to naprawić, po prostu zmień go na page-break-after: auto. Złamie się poprawnie i nie utworzy dodatkowej pustej strony.

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

39

Author: Josh P,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-14 05:07:46

Rozszerzenie z rozwiązania Sinan Ü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>

Wygląda na to, że page-break-inside:avoid w niektórych przeglądarkach jest brany pod uwagę tylko dla elementów blokowych, a nie dla komórki, tabeli, wiersza ani wbudowanego bloku.

Jeśli spróbujesz wyświetlić: block tagu TR i użyć tam page-break-inside: avoid, to działa, ale bałagan z układem tabeli.

18

Author: vicenteherrera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-11 14:03:43

Żadna z odpowiedzi tutaj nie zadziałała dla mnie w Chrome. AAverin na Githubie stworzył jakiś przydatny Javascript do tego celu i to mi się udało:

Po prostu dodaj js do kodu i Dodaj klasę "splitForPrint" do tabeli, a to starannie podzieli tabelę na wiele stron i doda nagłówek tabeli do każdej strony.

9

Author: MDave,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-31 07:52:22

Użyj tych właściwości CSS:

page-break-after

page-break-before

Na przykład:

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

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

Via

6

Author: marcgg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-13 20:32:39

Ostatnio rozwiązałem ten problem dobrym rozwiązaniem.

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

Działa jak czar!

4

Author: Wendel Tavares,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-30 15:25:53

Zakończyłem podążając za podejściem @ vicenteherrera, z pewnymi poprawkami(które są prawdopodobnie specyficzne dla bootstrap 3).

Zasadniczo; nie możemy złamać tr s, ani tdS, ponieważ nie są to elementy blokowe. Więc osadzamy div s w każdym i stosujemy nasze page-break-* Zasady przeciwko div. Po drugie, dodajemy wyściółkę na górze każdego z tych div - ów, aby zrekompensować wszelkie artefakty stylizacji.

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

Korekty marginesu i wypełnienia były konieczne, aby zrównoważyć pewien jitter, który został wprowadzony (moim zdaniem-z bootstrap). Nie jestem pewien, czy przedstawiam jakieś nowe rozwiązanie z innych odpowiedzi na to pytanie, ale myślę, że może to komuś pomoże.

1

Author: Aaron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-22 17:15:32

Sprawdziłem wiele rozwiązań i każdy nie działał dobrze.

Więc spróbowałem małej sztuczki i działa:

Tfoot with style: position: fixed; bottom: 0px; jest umieszczony na dole ostatniej strony, ale jeśli stopka jest zbyt wysoka, jest nakładana przez zawartość tabeli.

Tfoot with only: display: table-footer-group; nie jest nakładana, ale nie znajduje się na dole ostatniej strony...

Let ' s put two 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>

Jeden rezerwuje miejsce na nie-ostatnich stronach, drugi umieszcza w Twoim accual stopka.

0

Author: Zenon K.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-09 08:01:03

Wypróbowałem wszystkie sugestie podane powyżej i znalazłem proste i działające rozwiązanie cross browser dla tego problemu. Nie ma stylów ani podziału strony potrzebne do tego rozwiązania. Dla rozwiązania format tabeli powinien wyglądać następująco:

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

Powyższy format testowany i działający w przeglądarkach krzyżowych

-1

Author: Ananth Doss,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-13 07:33:41

No, Chłopaki... Większość rozwiązań tutaj nie zadziałała. Więc tak mi się układało..

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>

Pierwszy zestaw głowicy jest używany jako atrapa, aby nie było brakującej górnej granicy w 2. głowicy (tj. oryginalnej głowicy) podczas łamania strony.

-1

Author: Aneesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-06 07:41:53

Zaakceptowana odpowiedź nie działała dla mnie we wszystkich przeglądarkach, ale po css zadziałał dla mnie:

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

Struktura html była:

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

W moim przypadku wystąpiły dodatkowe problemy z thead tr, Ale To rozwiązało pierwotny problem utrzymywania wierszy tabeli przed łamaniem.

Z powodu problemów z nagłówkiem, ostatecznie skończyło się na:

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

Nie zapobiegło to łamaniu wierszy; tylko zawartość każdej komórki.

-3

Author: David Moeller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-01 19:20:14

score 240 · Accepted Answer

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