315

I have a project which requires printing an HTML table with many rows.

My problem is the way the table is printed over multiple page. It will sometimes cut a row in half, making it unreadable because one half is on the bleeding edge of a page and the remainder is printed on the top of the next page.

The only plausible solution I can think of is using stacked DIVs instead of a table and force page-breaks if needed.. but before going through the whole change I thought I could ask here before.

1
  • 36
    On a tangent, it might be worth adding a <thead> to your table with the following css thead {display: table-header-group; } so as to print the table-header on all subsequent pages (useful for loooooong data tables). Nov 19, 2009 at 14:38

13 Answers 13

328
<!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>
21
  • 25
    This also fails in WebKit browsers (eg. Safari and Chrome) Mar 14, 2012 at 19:51
  • 5
    While this is the standards-compliant way to do this, the only browser that currently implements the standard is Opera. Note that this is part of css2, and so the lack of implementation is likely to be a problem for some time to come, because apparently no-one cares.
    – pkh
    May 8, 2012 at 19:16
  • 20
    The CSS 2.1 specification indicates that page break style attributes are only applied to block-level elements. The default display mode for table rows is table-row. Unfortunately, no table elements are block level elements by default, including the table itself.
    – lsuarez
    Nov 30, 2012 at 21:07
  • 2
    @SinanÜnür It's not a requirement, so you can't rely on it, and unfortunately from my testing I can see that webkit saw "may" and ignored anything beyond it. Strangely, IE's got some rather nice large table printing support. Never thought I'd sing its praises on any given point.
    – lsuarez
    Dec 2, 2012 at 16:39
  • 6
    I can confirm that this does NOT work fine in Chrome or any other Webkit browser (e.g. Safari, Opera)-- unless, by "works fine" you mean "excludes any features that are considered optional". I think what most people want is running headers and footers, and tables that only allow page breaks between rows, neither of which is implemented in Webkit as of 2015/11/13. Nov 13, 2015 at 13:12
67

Note: when using the page-break-after:always for the tag it will create a page break after the last bit of the table, creating an entirely blank page at the end every time! To fix this just change it to page-break-after:auto. It will break correctly and not create an extra blank page.

<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>
4
  • 2
    Works for me on Chrome and is a nice plain CSS solution.
    – Ryan
    Feb 14, 2017 at 9:28
  • 1
    I'm trying same solution, but it does not break table data and disappear extra data instead of displaying it on next page. Any guesses? Jul 9, 2018 at 14:06
  • Worked for me as well, a elegant solution to my dynamically filled table solution.
    – Jaspal
    Apr 8, 2021 at 14:19
  • @Jaspal I thought page-break-after only work on divs or block elements. I tried this and it is not working. Feb 17 at 19:35
33

Expanding from Sinan Ünür solution:

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

It seems that page-break-inside:avoid in some browsers is only taken in consideration for block elements, not for cell, table, row neither inline-block.

If you try to display:block the TR tag, and use there page-break-inside:avoid, it works, but messes around with your table layout.

4
  • 3
    Here's an easy way to add the divs dynamically with jquery: $(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");}); Sep 11, 2014 at 5:26
  • 1
    Thanks to sinan ürün, vicenteherrera and Chrisbloom7. I applied the combination of your answers and it now works! Aug 3, 2016 at 8:31
  • You might try setting the @media CSS to tr { display: block; } for Print Only, rather than adding all the extraneous <div> elements. (Haven't tested but worth looking at)
    – Stephen R
    Oct 30, 2019 at 18:39
  • 1
    I added long table in div in html file, Then I added @media print{ thead { display: table-header-group;} tfoot { display: table-footer-group;} div { page-break-inside:avoid !important;} } to CSS file in media print. Thanks for @sinan and @vicenteherrera answers
    – ali
    Feb 13 at 13:10
12

None of the answers here worked for me in Chrome. AAverin on GitHub has created some useful Javascript for this purpose and this worked for me:

Just add the js to your code and add the class 'splitForPrint' to your table and it will neatly split the table into multiple pages and add the table header to each page.

4
  • Do you have sample on how to apply this? I've been trying to assign my table className as splitForPrint but in the JS there's nowhere it took the reference of the element using the className splitForPrint. Only the part where var splitClassName = 'splitForPrint'; but that's it. Aug 20, 2014 at 3:05
  • Down voted because the script you linked to does not solve the OP's problem without considerable cherry-picking and reconfiguring, and you didn't provide any examples of how one might go about doing it. Sep 12, 2014 at 15:05
  • Worked like a charm for me, none of the other solutions worked. +1 Had to add a little css to get the correct breaks .page-break { page-break-after: always; }
    – fhugas
    Feb 1, 2016 at 17:33
  • Yep by adding .page-break { page-break-after: always; } it saved my day!
    – milodky
    May 9, 2016 at 21:35
7

Use these CSS properties:

page-break-after

page-break-before 

For instance:

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

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

via

3
  • I'm not sure, you'll have to check. If not, split into different arrays and separate the arrays by an empty div
    – marcgg
    Nov 19, 2009 at 14:27
  • You will have to apply it to the table row or even cell, but not to the table, I think. Other than that, it should work.
    – Pekka
    Nov 19, 2009 at 14:29
  • 3
    does not work in chrome. Is ignored as if 6/13/2012 when applied to TR
    – ladieu
    Jun 13, 2012 at 19:33
7

I recently solved this problem with a good solution.

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

Works like a charm!

3
  • 1
    This "good" solution generates invalid html
    – Shadow
    May 17 at 6:23
  • @Shadow: yeah, from 7 upvotes, only 1 problem from you tho. maybe, please check your code Sep 25 at 8:33
  • It says in the html spec that attributes must be double quoted. Your solution will technically work in many browsers, but it's still invalid html.
    – Shadow
    Sep 26 at 9:28
3

I ended up following @vicenteherrera's approach, with some tweaks (that are possibly bootstrap 3 specific).

Basically; we can't break trs, or tds because they're not block-level elements. So we embed divs into each, and apply our page-break-* rules against the div. Secondly; we add some padding to the top of each of these divs, to compensate for any styling artifacts.

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

The margin and padding adjustments were necessary to offset some kind of jitter that was being introduced (by my guess - from bootstrap). I'm not sure that I'm presenting any new solution from the other answers to this question, but I figure maybe this will help someone.

1

I faced the same problem and search everywhere for a solution, at last, I fount something which works for me for every browsers.

html {
height: 0;
}

use this css or Instead of css you can have this javascript

$("html").height(0);

Hope this will work for you as well.

0

I checked many solutions and anyone wasn't working good.

So I tried a small trick and it works:

tfoot with style:position: fixed; bottom: 0px; is placed at the bottom of last page, but if footer is too high it is overlapped by content of table.

tfoot with only: display: table-footer-group; isn't overlapped, but is not on the bottom of last page...

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>

One reserves place on non-last pages, second puts in your accual footer.

0

I have a face like this problem. You can solve this problem using CSS properties.

    @media print {
       table{page-break-after: auto;}
   }

Note: You can not use this property with empty or on absolutely positioned elements.

-2

I've tried all suggestions given above and found simple and working cross browser solution for this issue. There is no styles or page break needed for this solution. For the solution, the format of the table should be like:

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

Above format tested and working in cross browsers

0
-3

The accepted answer did not work for me in all browsers, but following css did work for me:

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

The html structure was:

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

In my case, there were some additional issues with the thead tr, but this resolved the original issue of keeping the table rows from breaking.

Because of the header issues, I ultimately ended up with:

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

This didn't prevent rows from breaking; just each cell's content.

-3

Well Guys... Most of the Solutions up here didn't worked for. So this is how things worked for me..

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>

The first set of head is used as a dummy one so that there won't be a missing top border in 2nd head(i.e. original head) while page break.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.