How to deal with page breaks when printing a large HTML table

Question

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

User · Answer

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!

User · Answer

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    lt table gt     lt thead gt       lt tr gt  lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt  lt  tr gt       lt tr gt  lt  tr gt             lt  tbody gt   lt  table gt    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

User · Answer

Well Guys    Most of the Solutions up here didn t worked for  So this is how things worked for me    HTML   lt table gt     lt thead gt      lt tr gt        lt th style  border none height 26px   gt  lt  th gt        lt th style  border none height 26px   gt  lt  th gt                    lt  tr gt      lt tr gt        lt th style  border 1px solid black  gt ABC lt  th gt        lt th style  border 1px solid black  gt ABC lt  th gt                    lt tr gt     lt  thead gt   lt tbody gt         YOUR CODE   lt  tbody gt   lt  table gt    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

User · Answer

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

User · Answer

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    lt table gt       lt thead gt    lt  -- there should be  lt thead gt  tag-- gt           lt td gt Heading lt  td gt   lt  --  inside  lt thead gt  should be  lt td gt  it should not be  lt th gt -- gt       lt  thead gt       lt tbody gt  lt  --- lt tbody gt also must-- gt           lt tr gt               lt td gt data lt  td gt           lt  tr gt           lt  --100 more rows-- gt       lt  tbody gt   lt  table gt    Above format tested and working in cross browsers

User · Answer

lt  DOCTYPE HTML gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt   lt title gt Test lt  title gt   lt style type  text css  gt      table   page-break-inside auto       tr      page-break-inside avoid  page-break-after auto       thead   display table-header-group       tfoot   display table-footer-group    lt  style gt   lt  head gt   lt body gt       lt table gt           lt thead gt               lt tr gt  lt th gt heading lt  th gt  lt  tr gt           lt  thead gt           lt tfoot gt               lt tr gt  lt td gt notes lt  td gt  lt  tr gt           lt  tfoot gt           lt tbody gt           lt tr gt               lt td gt x lt  td gt           lt  tr gt           lt tr gt               lt td gt x lt  td gt           lt  tr gt           lt  -- 500 more rows -- gt           lt tr gt               lt td gt x lt  td gt           lt  tr gt       lt  tbody gt       lt  table gt   lt  body gt   lt  html gt

User · Answer

Expanding from Sinan   n  r solution    lt  DOCTYPE HTML gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt   lt title gt Test lt  title gt   lt style type  text css  gt      table   page-break-inside auto       div     page-break-inside avoid       This is the key        thead   display table-header-group       tfoot   display table-footer-group    lt  style gt   lt  head gt   lt body gt       lt table gt           lt thead gt               lt tr gt  lt th gt heading lt  th gt  lt  tr gt           lt  thead gt           lt tfoot gt               lt tr gt  lt td gt notes lt  td gt  lt  tr gt           lt  tfoot gt           lt tr gt               lt td gt  lt div gt Long lt br   gt cell lt br   gt should nt lt br   gt be lt br   gt cut lt  div gt  lt  td gt           lt  tr gt           lt tr gt               lt td gt  lt div gt Long lt br   gt cell lt br   gt should nt lt br   gt be lt br   gt cut lt  div gt  lt  td gt           lt  tr gt           lt  -- 500 more rows -- gt           lt tr gt               lt td gt x lt  td gt           lt  tr gt       lt  tbody gt       lt  table gt   lt  body gt   lt  html gt    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

User · Answer

Use these CSS properties   page-break-after  page-break-before    For instance    lt html gt   lt head gt   lt style gt   media print   table  page-break-after always     lt  style gt   lt  head gt    lt body gt        lt  body gt   lt  html gt    via

User · Answer

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    lt style gt       media print              avoid cutting tr s in half            th div  td div               margin-top -8px              padding-top 8px              page-break-inside avoid                   lt  style gt   lt script gt        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   lt div gt  lt  div gt             lt  script gt    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

User · Answer

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    lt html gt   lt head gt   lt style gt   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      lt  style gt   lt  head gt    lt body gt        lt  body gt   lt  html gt

User · Answer

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

User · Answer

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    x000D   x000D  TFOOT placer   x000D    display  table-footer-group  x000D    height  130px  x000D    x000D   x000D  TFOOT contenter   x000D    display  table-footer-group  x000D    position  fixed  x000D    bottom  0px   x000D    height  130px  x000D    x000D   lt TFOOT  class  placer  gt   x000D     lt TR gt  x000D       lt TD gt  x000D         lt  --  empty here x000D  -- gt  x000D       lt  TD gt  x000D     lt  TR gt  x000D   lt  TFOOT gt   x000D   lt TFOOT  class  contenter  gt   x000D     lt TR gt  x000D       lt TD gt  x000D        your long text or high image here x000D       lt  TD gt  x000D     lt  TR gt  x000D   lt  TFOOT gt  x000D   x000D   x000D    One reserves place on non-last pages  second puts in your accual footer

[html] How to deal with page breaks when printing a large HTML table

Examples related to html

Examples related to css

Examples related to printing

Examples related to html-table