Printing HTML Tables, Preventing Rows from Spanning Multiple Pages

Printing html tables, preventing rows from spanning multiple pages

Adding

td, th {
  width: 10000px;
}

inside @media print { } did the trick to make the example code work.

Now the printed columns are properly aligned again, and each row stays on a single page, never spanning two pages.

Works in current versions of Webkit (Safari), FF and Chrome (all tested on macOS only).

Caveat:

Unfortunately, the above is not fool proof. It only works in this example because the cells in each row have the same width.

Once those widths are random, an over-reaching pixel width like 10000px is messing up the columns again.

The only solution I found around this is to provide actual widths that are to be used. Since this is for printing, and since I know that I want to print to a specific paper format (e.g. DIN A4 or US Letter), I can specify the column width precisely with certainty.

So, while this solution is not a good one for a web page view in a browser on-screen, where the total width can vary, it's a good solution for printing, as long as the target print size can be predicted.

Here is the complete html code, setting the column widths to 4cm, 2cm and 3cm:

<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">
th, td { border: 1px solid #aaa; }
@media print {
  table, tr, td, th {
    page-break-inside: avoid;
  }
  tr {
    display: block;
    page-break-before: auto;
  }
  td:nth-child(1), th:nth-child(1) {
    width: 4cm;
  }
  td:nth-child(2), th:nth-child(2) {
    width: 2cm;
  }
  td:nth-child(3), th:nth-child(3) {
    width: 3cm;
  }
}
</style></head>
<body>
<table>
  <tr><th>A</th><th>B</th><th>C</th></tr>
  <tr><td>more text<br>1<br>2<br>3<br>4<br>5<br></td><td>more text</td><td>more text</td></tr>
  <tr><td>1 adasd<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1asd<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>xsdsdfsf</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4<br>5<br>6<br></td><td>x</td><td>x</td></tr>
  <tr><td>1<br>2 asda asdas<br>3<br>4<br>5<br>6<br></td><td>xasdada</td><td>x</td></tr>
  <tr><td>1<br>2<br>3<br>4 asdasd <br>5<br>6<br></td><td>x</td><td>x</td></tr>
</table>
</body></html>

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

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

Printing HTML tables without splitting a row across two pages

You probably want to play around with page-break-before/after: auto. page-break-inside would be ideal but its not supported by most browsers.

Take a look here http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html for some good info.

How to avoid HTML table background color from spanning across pages on print?

Found the answer myself, documenting it here for anyone facing this problem in the future.

Simply color the table by row in the css. ie.

tr{    background-color:#E2EFD9; //whatever color you want    }

Html table breaking row when printing

Change your CSS to this

 @media print {

  table.report { page-break-after:auto }
  table.report tr    { page-break-inside:avoid; page-break-after:auto }
  table.report td    { page-break-inside:avoid; page-break-after:auto }
  table.report thead { display:table-header-group }
  table.report tfoot { display:table-footer-group }
 }

and also remove all extra

<tbody>...</tbody>

, you should have only one

<tbody></tbody>

and all tr between that.

that should work for you.

ref: https://www.w3.org/TR/css-print/

How do I keep a td element from appearing across multiple pages when printed from IE?

try:

The CSS2-friendly way to do it would be

td { page-break-inside: avoid; }

see the page-break-inside definition

from: http://channel9.msdn.com/forums/TechOff/35322-Keep-with-next-when-printing-HTML-tables/

How to apply CSS page-break to print a table with lots of rows?

You can use the following:

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

Refer the W3C's CSS Print Profile specification for details.

And also refer the Salesforce developer forums.

Printing HTML Tables, Preventing Rows from Spanning Multiple Pages