overlapping text when repeating headers/footers in table #1524

rnenjoy · 2014-02-13T14:11:52Z

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 · 2014-02-13T14:18:05Z

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.

rnenjoy · 2014-02-13T15:19:39Z

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 · 2014-02-13T16:04:50Z

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

rnenjoy · 2014-02-14T07:51:48Z

This is on Windows x64 (Windows 2008 R2)

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

Page 5.

ashkulz · 2014-02-14T08:20:28Z

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.

rnenjoy · 2014-02-14T08:29:49Z

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 · 2014-02-18T03:41:37Z

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

rnenjoy · 2014-02-18T07:44:26Z

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

ashkulz · 2014-02-20T08:24:57Z

@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 · 2014-02-20T08:39:08Z

@ashkulz thanks for your great work!!

quickstick · 2014-04-28T07:21:03Z

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 · 2014-04-28T10:24:06Z

@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 · 2014-05-10T02:37:22Z

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 · 2014-05-12T05:43:01Z

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

rodrigomf24 · 2014-05-27T05:32:02Z

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 · 2014-05-27T20:53:34Z

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 · 2014-06-27T14:25:46Z

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

kghaggerty · 2019-10-05T04:07:57Z

I had a lot of padding at the bottom of my tables, which are all dynamic so had to make sure they had spacing in between. As of right now, it appears taking away the padding-bottom from my tables and adding a bunch of <br /> has solved the problem for me. None of the solutions above seemed to be working. It's messy, but it seems to working locally. Hopefully after uploading to S3 i will get the same result

arslbbt · 2019-11-06T13:32:35Z

Hi, I have an issue header overlapping.
I tried these following code in my pdf but nothing happened,can anyone help me to solve this issue?

thead { display: table-header-group; }
tfoot { display: table-row-group; }
tr { page-break-inside: avoid; }

header

this issue only happened after a one-page number(The Table header is overlapping with the table body when the table row is paginated. )

clafix · 2020-02-04T12:37:54Z

Have same troubles with NReco.PdfGenerator v1.1.15 (based on wkhtmltopdf).

I have some tables, placed one-by-one in html. Each table have one header inside "thead" tag:

CSS:

table { border:1px solid black; border-collapse:collapse; margin-bottom:-1; } 
tr { page-break-inside: avoid; }

HTML:

<table width="100%">
	<thead>
		<tr class="RegisterHeader"></tr>
		<tr class="RegisterHeader"></tr>
	</thead>
	...
</table>

While generating PDF, i got headers repeating on each page, that exactly what i need.
But i found one issue with it: if new table starting from end of current page, and header not fits in remaining place on list, header moving to next page, and repeating header - too! As result we got overlapping of 2 same headers.

I tried to fix it with adding empty "hack" table between existing tables:

CSS (note: "page-break-inside: auto;"):

.HackBrTable { width: 100%; font-size: 12; padding: 0; margin: 0; border: none; page-break-inside: auto; }
.HackBrTd { border: none; }

HTML:

<table class="HackBrTable">
	<tr>
		<td class="HackBrTd"><br><br><br><br></td>
	</tr>
</table>

And it's worked!

But, most strange thing - if i remove "padding: 0; margin: 0;" from css rules, issue comes again, and headers again overlapping! It's unbeliveable.

Proofs (on pics "border: none;" removed from css):

Without "padding: 0; margin: 0;" (same effect without "hack" table)
With "padding: 0; margin: 0;"

Don't know why "padding: 0; margin: 0;" gives this effect... It's very strange.

MrWasimAbbasi · 2020-02-06T11:48:11Z

I am using mpdf with yii 1.1, in which i have a pdf to show report. Pdf has head, contents(table) footer (contains legends of table columns). issue is that when footer legends contents getting increased it overlaps the contents data with each other.
disp.pdf

stevebauman · 2020-02-07T15:16:05Z

Only way I could resolve this myself is with long table heights and overlapping text was to change the paper size to Tabloid to make the page physically larger so overlapping couldn't occur.

MrWasimAbbasi · 2020-02-08T06:25:53Z

Thanks but I am supposed to do this on A-4 Landscape page.

With new releases on the 0.12.x branch, the docker container is experiencing the following issues: - wkhtmltopdf/wkhtmltopdf#1524 - wkhtmltopdf/wkhtmltopdf#3241

AcroKostya · 2020-10-15T07:29:55Z

Hi guys. So whoever finds it banging his head against the wall trying to solve issues with page-break styles not working and header overlapping rows on the 2+ pages, here's what I found out:
At the root of my page, I had display: flex; container. It was exactly the reason why none of the previous answers worked for me.
@media print { display: block; } for that container worked like a charm in my case.
I'm fully aware, you might need display: flex for print version of your page. Just wanted to let you know that was the root cause of the problem.

kghandi · 2020-12-01T19:15:13Z

I had the same issue. The most discussed solution below did not resolve the issue.

thead { display: table-header-group; }
tfoot { display: table-row-group; }
tr { page-break-inside: avoid; }

Eventually I found that one of the parent divs for the table had position:relative; top:40px. This seems to confuse Chrome.
The workaround is to make sure that none of the divs that the table is inside have a relative position. So in my case I had to add:

@media print {
    .content-page { position: initial; top: 0 }
}

Chrome should be fixed so that thead location is not confused by relative positioning of a parent div.

See attached jsfiddle for example of the issue:
https://jsfiddle.net/kghandi/z1yj5okm/

With the same command line parameters, wkhtmltopdf/wkhtmltopdf#1524 and wkhtmltopdf/wkhtmltopdf#3241 will affect Colore output. Until we have PDF output comparison tests, it is not worth to update this library

With the same command line parameters, wkhtmltopdf/wkhtmltopdf#1524 and wkhtmltopdf/wkhtmltopdf#3241 will affect Colore output. Until we have PDF output comparison tests, it is not worth to update this library [ci skip]

With the same command line parameters, wkhtmltopdf/wkhtmltopdf#1524 and wkhtmltopdf/wkhtmltopdf#3241 will affect Colore’s PDF output. PDF comparison specs are required to update this library [ci skip]

francisjervis · 2021-09-27T04:36:04Z

If a table is enclosed in a <div class="table-responsive"> element it will overlap. Removing this parent div fixed this issue for me.

With the same command line parameters, wkhtmltopdf/wkhtmltopdf#1524 and wkhtmltopdf/wkhtmltopdf#3241 will affect Colore’s PDF output. PDF comparison specs are required to update this library [ci skip]

TrueShutDown · 2021-12-17T21:21:44Z

None of the above cases work for me. If the cell is larger than the page. Is there any solution?

HTML: https://jsfiddle.net/htLwdprc/
PDF: test.pdf

Preview:

nvtamnt99 · 2022-01-20T09:34:29Z

I have solved my problem by adding:
thead {
display: table-row-group;
}

srabieb · 2022-05-12T10:16:07Z

my table without header and footer. text overlap to bottom border when table split next page and pagebreak not wokring for me. help

Norris1z · 2022-08-23T18:29:44Z

Adding
html, body { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

Fixed it for me.

With the same command line parameters, wkhtmltopdf/wkhtmltopdf#1524 and wkhtmltopdf/wkhtmltopdf#3241 will affect Colore’s PDF output. PDF comparison specs are required to update this library [ci skip]

bug2point0 · 2022-10-13T17:11:31Z

rowspans create this for me. i either don't understand how break-inside is supposed to work or the library doesn't apply it. adding empty tr at the end of a rowspanned section makes the result presentable. sample python fix:

finder = soup.select(f'#{table_id} tbody tr')
for c, x in enumerate(finder):
	rowspanned = x.select_one('td[rowspan]')
	if rowspanned:
		rows_spanning = int(rowspanned['rowspan'])
		finder[c + rows_spanning - 1].insert_after(soup.new_tag('tr'))

DmitryKuznetsovTTD · 2022-10-28T19:13:15Z

.table-responsive {
    overflow-x: auto;
}

in the case of .table-responsive as a table wrapper, we should unset overflow-x

  @media print {
      .table-responsive {
          overflow-x: visible !important;
      }
  }

mizuhs · 2022-11-11T02:53:03Z

Hi guys. So whoever finds it banging his head against the wall trying to solve issues with page-break styles not working and header overlapping rows on the 2+ pages, here's what I found out: At the root of my page, I had display: flex; container. It was exactly the reason why none of the previous answers worked for me. @media print { display: block; } for that container worked like a charm in my case. I'm fully aware, you might need display: flex for print version of your page. Just wanted to let you know that was the root cause of the problem.

After testing many of the solutions both here and in other pages, AcroKostya's is the one that worked for me (since I specifically need the repeating header). By doing some tests I could notice that if I deactivated the css for the template I'm using, this issue would disappear (with the added effect of losing the custom table design), but it took me this answer to effectively identify the sole cause of the issue, which was a content-wrapper div that uses flex.

larivasd · 2022-11-15T16:00:32Z

It worked for me not using the "thead" tag

ashkulz closed this as completed Feb 13, 2014

ashkulz added the Invalid label Feb 13, 2014

ashkulz added Verified and removed Invalid labels Feb 14, 2014

ashkulz reopened this Feb 14, 2014

ashkulz added this to the 0.12.1 milestone Feb 14, 2014

ashkulz modified the milestones: future, 0.12.1 Apr 2, 2014

ashkulz mentioned this issue Apr 23, 2014

Text overlapping THEAD on new 0.12.0 version #1660

Closed

ashkulz added the Documentation label Apr 28, 2014

ashkulz mentioned this issue May 5, 2014

Table with fixed header and rowspan #1688

Closed

ashkulz mentioned this issue May 15, 2014

The footer of the table is being placed in every page and it's getting over the content #1718

Closed

ashkulz mentioned this issue Jun 11, 2014

nested tables with <thead> headers are overlapping starting from 2nd page #1770

Open

pradipyenpure7 mentioned this issue Dec 11, 2019

overlapping table headers with content from the above row when creating pdf #4554

Open

tagliala added a commit to ifad/colore that referenced this issue May 21, 2020

Use an older version of wkhtmltopdf on Travis

c6225cd

With new releases on the 0.12.x branch, the docker container is experiencing the following issues: - wkhtmltopdf/wkhtmltopdf#1524 - wkhtmltopdf/wkhtmltopdf#3241

tagliala mentioned this issue May 21, 2020

Use an older version of wkhtmltopdf on Travis ifad/colore#33

Merged

Captivea-BEL mentioned this issue Oct 10, 2023

Replace Wkhtmltopdf odoo/odoo#86501

Open

l1xnan mentioned this issue Feb 8, 2024

[Bug] 正好在表格中间分页的时候，会导致文本覆盖 l1xnan/obsidian-better-export-pdf#112

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

overlapping text when repeating headers/footers in table #1524

overlapping text when repeating headers/footers in table #1524

rnenjoy commented Feb 13, 2014

ashkulz commented Feb 13, 2014

rnenjoy commented Feb 13, 2014

ashkulz commented Feb 13, 2014

rnenjoy commented Feb 14, 2014

ashkulz commented Feb 14, 2014

rnenjoy commented Feb 14, 2014

ashkulz commented Feb 18, 2014

rnenjoy commented Feb 18, 2014

ashkulz commented Feb 20, 2014

rnenjoy commented Feb 20, 2014

quickstick commented Apr 28, 2014

ashkulz commented Apr 28, 2014

inferiorhumanorgans commented May 10, 2014

ashkulz commented May 12, 2014

rodrigomf24 commented May 27, 2014

rainabba commented May 27, 2014

gregblass commented Jun 27, 2014

kghaggerty commented Oct 5, 2019 •

edited

Loading

arslbbt commented Nov 6, 2019 •

edited

Loading

clafix commented Feb 4, 2020

MrWasimAbbasi commented Feb 6, 2020

stevebauman commented Feb 7, 2020

MrWasimAbbasi commented Feb 8, 2020

AcroKostya commented Oct 15, 2020

kghandi commented Dec 1, 2020

francisjervis commented Sep 27, 2021 •

edited

Loading

TrueShutDown commented Dec 17, 2021

nvtamnt99 commented Jan 20, 2022 •

edited

Loading

srabieb commented May 12, 2022

Norris1z commented Aug 23, 2022

bug2point0 commented Oct 13, 2022

DmitryKuznetsovTTD commented Oct 28, 2022 •

edited

Loading

mizuhs commented Nov 11, 2022 •

edited

Loading

larivasd commented Nov 15, 2022 •

edited

Loading

overlapping text when repeating headers/footers in table #1524

overlapping text when repeating headers/footers in table #1524

Comments

rnenjoy commented Feb 13, 2014

ashkulz commented Feb 13, 2014

rnenjoy commented Feb 13, 2014

ashkulz commented Feb 13, 2014

rnenjoy commented Feb 14, 2014

ashkulz commented Feb 14, 2014

rnenjoy commented Feb 14, 2014

ashkulz commented Feb 18, 2014

rnenjoy commented Feb 18, 2014

ashkulz commented Feb 20, 2014

rnenjoy commented Feb 20, 2014

quickstick commented Apr 28, 2014

ashkulz commented Apr 28, 2014

inferiorhumanorgans commented May 10, 2014

ashkulz commented May 12, 2014

rodrigomf24 commented May 27, 2014

rainabba commented May 27, 2014

gregblass commented Jun 27, 2014

kghaggerty commented Oct 5, 2019 • edited Loading

arslbbt commented Nov 6, 2019 • edited Loading

clafix commented Feb 4, 2020

MrWasimAbbasi commented Feb 6, 2020

stevebauman commented Feb 7, 2020

MrWasimAbbasi commented Feb 8, 2020

AcroKostya commented Oct 15, 2020

kghandi commented Dec 1, 2020

francisjervis commented Sep 27, 2021 • edited Loading

TrueShutDown commented Dec 17, 2021

nvtamnt99 commented Jan 20, 2022 • edited Loading

srabieb commented May 12, 2022

Norris1z commented Aug 23, 2022

bug2point0 commented Oct 13, 2022

DmitryKuznetsovTTD commented Oct 28, 2022 • edited Loading

mizuhs commented Nov 11, 2022 • edited Loading

larivasd commented Nov 15, 2022 • edited Loading

kghaggerty commented Oct 5, 2019 •

edited

Loading

arslbbt commented Nov 6, 2019 •

edited

Loading

francisjervis commented Sep 27, 2021 •

edited

Loading

nvtamnt99 commented Jan 20, 2022 •

edited

Loading

DmitryKuznetsovTTD commented Oct 28, 2022 •

edited

Loading

mizuhs commented Nov 11, 2022 •

edited

Loading

larivasd commented Nov 15, 2022 •

edited

Loading