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

前端 未结 12 1842
有刺的猬
有刺的猬 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)
提交回复
热议问题