CODEWITHSUNDEEP
htmlcsshtml-tablecss-print
Fire Lancer
Fire Lancer

Reputation: 30165

Prevent page break between thead and tbody when printing

I have some dynamic content, and when printing I found browsers will insert a page break between a tables <thead> and the following <tbody>, resulting in things like this screenshot depending on the preceding dynamic content.

I want it to move the table/header to the next page in this case so I don't have a header by itself.

break-after: avoid looks like it should be the CSS rule for this, I tried it on combinations of the thead, the contained tr, and the th, but it doesn't seem to have any effect.

Mostly tried on Chrome, I got similar results in Firefox, I would like this to work in all major browsers if possible.

In many cases tables will fit the current page fine, so I don't want to start every table on a new page. They might also be longer than one entire page, and need to be able to break somewhere between rows.

Chrome print to PDF

      table {
        border-collapse: collapse;
      }
      thead {
        break-after: avoid; /* No effect */
      }
      thead tr {
        break-after: avoid; /* No effect */
      }
      thead tr th {
        break-after: avoid; /* No effect */
      }
      td, th {
        border: 1px solid #A0A0A0;
        padding: 0.2em 0.5em;
      }
      td {
        vertical-align: top;
      }
      td p:first-child { margin-top: 0; }
      td p:last-child { margin-bottom: 0; }
<div style="border: 2px solid red; width: 200px; height: 240mm">
  <p>Consume Space</p>
  <p>Required height for effect is browser dependent</p>
  <button onclick="window.print()">Print</button>
 </div>
<table>
  <thead><tr><th><div>Name</div></th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
  <tbody>
    <tr><td>A</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>B</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>C</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>D</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
  </tbody>
</table>

Upvotes: 2

Views: 2308

Answers (1)

Simone Rossaini
Simone Rossaini

Reputation: 8162

As you can see media print resolve your problem

table {
        border-collapse: collapse;
      }
      thead {
        break-after: avoid; /* No effect */
      }
      thead tr {
        break-after: avoid; /* No effect */
      }
      thead tr th {
        break-after: avoid; /* No effect */
      }
      td, th {
        border: 1px solid #A0A0A0;
        padding: 0.2em 0.5em;
      }
      td {
        vertical-align: top;
      }
      td p:first-child { margin-top: 0; }
      td p:last-child { margin-bottom: 0; }
@media print {
  table {page-break-inside: avoid;}
}
<div style="border: 2px solid red; width: 200px; height: 240mm">
  <p>Consume Space</p>
  <p>Required height for effect is browser dependent</p>
  <button onclick="window.print()">Print</button>
 </div>
<table>
  <thead><tr><th><div>Name</div></th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
  <tbody>
    <tr><td>A</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>B</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>C</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>D</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
  </tbody>
</table>

You can play with that for desidered result.

Upvotes: 0

Related Questions