发表新帖
发表新帖

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

前端 未结
关注
12 1846
有刺的猬
有刺的猬 2020-11-22 16:44

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

相关标签:
12条回答
  • 天命终不由人
    2020-11-22 17:22

    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.

    0 讨论(0)
  • 半阙折子戏
    2020-11-22 17:23

    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 讨论(0)
  • 予麋鹿
    2020-11-22 17:25

    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.

    0 讨论(0)
  • 时光说笑
    2020-11-22 17:28

    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>
    0 讨论(0)
  • 天命终不由人
    2020-11-22 17:30

    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.

    0 讨论(0)
  • 孤街浪徒
    2020-11-22 17:31

    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 讨论(0)
 看不清?
提交回复
热议问题