How to avoid page breaks inside the row of a table with CSS?

Spread the love

Sometimes, we want to avoid page breaks inside the row of a table with CSS.

In this article, we’ll look at how to avoid page breaks inside the row of a table with CSS.

How to avoid page breaks inside the row of a table with CSS?

To avoid page breaks inside the row of a table with CSS, we set the page-break-inside property.

For instance, we write

<table class="print-friendly">
  <!-- ...-->
</table>

<style>
  table.print-friendly tr td,
  table.print-friendly tr th {
    page-break-inside: avoid;
  }
</style>

to add a table.

Then we set the td and th styles to page-break-inside: avoid; to prevent page breaks within these elements.

Conclusion

To avoid page breaks inside the row of a table with CSS, we set the page-break-inside property.

Leave a Reply

Your email address will not be published. Required fields are marked *