Search code examples
htmlcssprintinghtml-tablepage-break

Allow page breaks inside tr and td elements

I'm trying to create a one column table that allows a page break inside of tr and td cells. Below is just an example but my actual table has a lot going on inside of each cell.

<table>
  <thead>
    <tr>
      <th>TABLE HEADER</th>
    </tr>
  </thead>
  <tbody>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
  </tbody>
</table>

I'm using the following style to see where the cells start and end:

.my-cell {
  padding: 160px 40px;
  border: 1px solid #000;
}

When I print this page, the table breaks after the second row to avoid splitting the third row:

enter image description here

My goal is to prevent this automatic page break. I've tried adding the following css, but it's still breaking at the same place:

tr, td {
  page-break-inside: initial;
}

Is there anyway to allow page breaks inside of tr and td elements or is this not possible? And where is this property actually set? It doesn't appear anywhere in chrome developer tools or in documentation.

Solution

  • According to the specs, the page-break-inside property applies to block elements although user agents could apply it to other elements:

    User Agents must apply these properties to block-level elements in the normal flow of the root element. User agents may also apply these properties to other elements, e.g., 'table-row' elements.

    So one possibility (that may not be ideal) would be to change the display of the rows when printing so they are display: block instead of the default display: table-row. Something like this (this is too generic, you may need to make it more specific):

    @media print {
    tr {
        page-break-inside: initial;
        display: block;
    }
}

    I tested and it works fine on Chrome and Safari, but doesn't seem to work on Firefox:

    Printing dialog