New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

overlapping text when repeating headers/footers in table #1524

Open
rnenjoy opened this Issue Feb 13, 2014 · 196 comments

Comments

Projects
None yet
@rnenjoy

rnenjoy commented Feb 13, 2014

When having a big table with lots of rows, or many tables with 10-20 rows, sometimes the feature that repeats the thead/tfoot when there is a page break causes weird results.

Like a tfoot is moved to page one, and is displayed above some other text.

Can this feature be turned off?

@ashkulz

This comment has been minimized.

Member

ashkulz commented Feb 13, 2014

Nope, that is a part of the patched QT and can't be controlled. If you want, you can compile your own fork where it is disabled. If you want, post examples of what weird results you are getting -- first check if your HTML is correct.

@ashkulz ashkulz closed this Feb 13, 2014

@ashkulz ashkulz added the Invalid label Feb 13, 2014

@rnenjoy

This comment has been minimized.

rnenjoy commented Feb 13, 2014

The HTML:
http://pastebin.com/cMimg5g4

The Header:
http://pastebin.com/s0gyV9Xe

The Footer:
http://pastebin.com/5NU3RmFB

Settings:
'header-html' => 'header.html', 'footer-html' => 'footer.html', 'header-spacing' => 5, 'footer-spacing' => 0

On page 5 of the PDF, we get overlappsed text.

@ashkulz

This comment has been minimized.

Member

ashkulz commented Feb 13, 2014

Can you post screenshots? I don't know which platform you are testing this on..

@rnenjoy

This comment has been minimized.

rnenjoy commented Feb 14, 2014

This is on Windows x64 (Windows 2008 R2)

Here is the PDF:
http://www.hymercenter.se/2014-01-31.pdf

Page 5.

@ashkulz ashkulz added Verified and removed Invalid labels Feb 14, 2014

@ashkulz

This comment has been minimized.

Member

ashkulz commented Feb 14, 2014

Can you check if it works better with the 32-bit version? Also, check if you get better/different results on a Windows XP/7 machine (not server), as there seems to be some issues with Windows Server 2008.

@ashkulz ashkulz reopened this Feb 14, 2014

@ashkulz ashkulz added this to the 0.12.1 milestone Feb 14, 2014

@rnenjoy

This comment has been minimized.

rnenjoy commented Feb 14, 2014

Hello,

I have done some tests.

32/64 bit on Windows Server 2008 produces the exact same problem.

32bit on Windows 7 produces the exact same problem. 64 bit not tested on Win7 as i dont see the issue is there.

@ashkulz

This comment has been minimized.

Member

ashkulz commented Feb 18, 2014

@rnenjoy: do you mean to say on Windows 7, 64-bit the issue is not there or you have not tested it?

@rnenjoy

This comment has been minimized.

rnenjoy commented Feb 18, 2014

@ashkulz I have tested it now. Same error on Windows 7 x64.

@ashkulz

This comment has been minimized.

Member

ashkulz commented Feb 20, 2014

@rnenjoy: looks like a corner case with the changes made in patched QT by @trvrnrth, will have to investigate it further (unlikely to happen before next week)

@rnenjoy

This comment has been minimized.

rnenjoy commented Feb 20, 2014

@ashkulz thanks for your great work!!

@quickstick

This comment has been minimized.

quickstick commented Apr 28, 2014

Hi @rnenjoy, @ashkulz,

Unsure if I can offer a solution to this for you, but I found this issue while Google-ing for the same issue.

My table is inside a DIV which has the CSS property overflow-x: auto;

If I switch it to overflow-x: visible; instead this problem goes away.

So assuming you're using the --print-media-type parameter of wkhtmltopdf, you can smash it with a CSS media query so it doesn't affect the browsers output.

@media print {
    .element-that-contains-table {
        overflow: visible !important;
    }
}

Hope that helps you with both a temporary solution and a possible permanent fix for this issue.

@ashkulz

This comment has been minimized.

Member

ashkulz commented Apr 28, 2014

@quickstick: I'll make sure to document that, but I don't think it is applicable in the above test case -- it doesn't have an overflow CSS property.

@inferiorhumanorgans

This comment has been minimized.

inferiorhumanorgans commented May 10, 2014

This isn't fixed for me. If I set overflow-x on body to hidden, table headers don't appear to have any height. If I set the thead display property to something like table-cell, the height is fixed, but the header only occupies one cell and causes problems with the rest of the table. If I set the div containing the table to allow overflow, the problem is not resolved.

Ex:

<body>
<div>
<table>
<thead>
<tr>
<th>
</th>
</tr>
<tbody>
<tr>
<td>
</td>
</tbody>
</table>
</div>
</body>
</html>

If I don't hide the x overflow on the body, the table exceeds the page width, and qt scales the contents even if I've specified otherwise with wkhtmltopdf.

@ashkulz

This comment has been minimized.

Member

ashkulz commented May 12, 2014

@inferiorhumanorgans: I don't think that the issue is solved, hence it is still open.

@rodrigomf24

This comment has been minimized.

rodrigomf24 commented May 27, 2014

I found a solution! For printing the report instead of leaving the table footer tag I used it as a a normal tr tag and now it wont repeat the footer of the table.

@rainabba

This comment has been minimized.

rainabba commented May 27, 2014

I can confirm this issue. Can't provide a test-case just yet, but I have one "master table" which contains a single thead, many tbody then one tfoot. For SOME tbody instances (a specific pattern that I'm trying to abstract for the sake of this issue), the content starts at the top of the page, overlapping the thead. For others though, it does not so the issue isn't even consistent within one document except that is a particular type of content. I'll report back if I can find the pattern in a more simplified, repeatable way.

@gregblass

This comment has been minimized.

gregblass commented Jun 27, 2014

I'm having the same issue. Has there been any update to this or any workaround suggestions? Right now on one of our tables on our production server, text commonly overlaps the table headers.

http://imgur.com/v7DCf2X

@remi-filament

This comment has been minimized.

remi-filament commented Jun 19, 2018

Thank you all for your efforts, I am still facing an issue (even with latest version) when one of my row is longer than one page.

In that case the line breaks correctly at the end of the first page, but starts again on the top of the page (alhough after the page header), above (or under) the table header. Therefore the table header and the continuation of the table row are one above the other in the resulting PDF when I would expect that new row starts after the table header.

The other lines (less long than one page) are correctly displayed on next page after using
page-break-inside: avoid
(it was already working before, even with version 0.12.4)

@sanjaycoder123

This comment has been minimized.

sanjaycoder123 commented Jul 4, 2018

u Can add this to your table to stop th overlapping by td
@gmkhussain

This comment has been minimized.

gmkhussain commented Jul 12, 2018

use this classes for page break :

<style type="text/css" media="screen,print">
       /* Page Breaks */

/***Always insert a page break before the element***/
       .pb_before {
           page-break-before: always !important;
       }

/***Always insert a page break after the element***/
       .pb_after {
           page-break-after: always !important;
       }

/***Avoid page break before the element (if possible)***/
       .pb_before_avoid {
           page-break-before: avoid !important;
       }

/***Avoid page break after the element (if possible)***/
       .pb_after_avoid {
           page-break-after: avoid !important;
       }

/* Avoid page break inside the element (if possible) */
       .pbi_avoid {
           page-break-inside: avoid !important;
       }

   </style>
   

How to write html code see example.

<div class="page1 pb_after">
   content 1...
</div>
<div class="page2 pb_before pb_after">
   content 2.... <table>...</table> 
</div>

Table rows break... It works :)

@daj1234

This comment has been minimized.

daj1234 commented Aug 10, 2018

Hi,

Can you please help me. I've tried all solutions above and header and 2nd page are still overlapping.

print pdf.zip

@Patryk1098

This comment has been minimized.

Patryk1098 commented Sep 18, 2018

I found a solution! For printing the report instead of leaving the table footer tag I used it as a a normal tr tag and now it wont repeat the footer of the table.

TL;DNR: Don't use <thead> & <th>

The above quoted post actually led me to the correct solution: The <thead> and <th> tags are repeated at the top of the continuing row on the second page. If you remove <thead> and <tbody> and use simpler (older style) html tables: <table><tr><td></td></tr></table>, the header won't be repeated. Then just add a class to the "header" rows/cells to style them as you like.

This worked when setting all of the following (mentioned) solutions didn't:

  • Using the --print-media-type parameter
  • Using th { height: 1.1cm; }
  • Using th { display: table-header-group; }
  • Using tr { page-break-inside: avoid }
  • Setting media query:
@media print {
    .export-table {
        overflow: visible !important;
    }
}
  • etc.
@mutasam

This comment has been minimized.

mutasam commented Sep 22, 2018

i answered just the same problem here
#2367

i tried all the suggestions but nothing worked for me .
after a cup of tea and hours staring to code i figured out the problem was the stupid

position: relative; bottom: 2cm;

so if u have a relative position any where in your code removed it now.
and absolutely add

thead { display: table-header-group }`

tfoot { display: table-row-group }

tr { page-break-inside: avoid }

@filipkis

This comment has been minimized.

filipkis commented Oct 12, 2018

There is actually an additional case that the proposed css fix doesn't solve.

If there is a table with a row that spans over several pages. For example:

<body>
  <table>
    <thead>
      <tr>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          VERY LONG TEXT GOES HERE
       </td>
      </tr>
    </tbody>
  </table>
</body>

You can see the print.pdf output that this would generate.

Note: I'm using version 0.12.3 due to #3421, but I've tested with 0.12.4 and it was the problem as well.

@devrhythm

This comment has been minimized.

devrhythm commented Oct 29, 2018

I use wkhtmltopdf 0.12.5.
And I already add CSS that someone tell it work.

.table {
	border-collapse: collapse !important;
	width: 100%;
	margin-bottom: 20px;
}

.table thead {
	display: table-header-group;
	height: 1.1cm;
}

.table tfoot {
	display: table-row-group;
}

.table tr {
	page-break-inside: avoid !important;
}

I think it work with content isn't too long more than 1 page.
if the content in the table is long more than 1 page.
It will show like below picture.

capture

@ioweb-gr

This comment has been minimized.

ioweb-gr commented Oct 30, 2018

I'm facing what @filipkis and @devrhythm are mentioning as well. When the td element is too big too fit in one page the same thing happens. I've been unable to make it stop overlapping no matter what solution was proposed before.

@pachonk

This comment has been minimized.

pachonk commented Nov 13, 2018

🤔 I'm trying to use this hack for repeating h1's with something like:

<table>
<thead><th><h1>Title</h1></th></thead>
<td><table id='really-big-table'></table></td>
</table>

The title repeats, yay! But it does overlap. Is there any CSS that would make this repeating h1 hack work with nested tables?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment