Page Breaks in Long HTML Table Rows and Cells With CSS

Wrangling break-after, break-before, break-inside and the related page-break-* into submission

I had a document that was over 1000 pages. 1078 I think to be exact. What I noticed was that there was a lot of wasted space with extraneous page breaks in tables. Here’s why.

In order to fix the problem in my last post, I had to force the text to wrap and my prior solution required:

display:inline-block

Making Long Words Wrap or Break in HTML with CSS

What I read was that the inside break options which allow you to break table rows, cells, and other containers across pages only works with:

display:block

So how to I break the words and also allow the table cells (TD tag) to break across page breaks? I really fought with this one. Where there’s a will there’s a way.

First of all, I found a solution that doesn’t use inline:block to allow word wrapping within containers.

float:left;clear:left;word-wrap:break-word

The problem with display-block for table rows and cells