Wicked_pdf avoid page-break-inside not working

Nhat Dinh picture Nhat Dinh · Feb 20, 2017 · Viewed 7.2k times · Source

This is the result when i use Wicked_pdf to convert my html.erb page to pdf.

enter image description here

Problem: Seem table 's tr has been splitted into two pages.

What i tried without success:

  1. Use page-break-inside as described here or here

table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; }

  1. putting text within a div, as explained here
  2. here

Another option: place each tr in its own tbody and then apply the peage break css rules to the tbody. Tables support multiple tbodys. A bit of extra markup, but works decently for me.

I am using Ruby on Rails 4.2.6, Wicked_pdf latest version, bootstrap.

Relate issue on github

Question: How can i make table 's tr not split into two pages.

Answer

Biskrem Muhammad picture Biskrem Muhammad · Jul 17, 2018

well, to solve this you have to user page-break-inside: avoid !important; with the repeated div the results in this overflow.

like if you have:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

which results in overflow that will make things overlap with the header within the page breaks..

so >> use: page-break-inside: avoid !important; with this class article.

table.report-container div.article {
    page-break-inside: avoid;
}

---> here is a full answer to print a page properly using html/css