Phantomjs: Table header overlaps table content when page breaks

[goddabuzz]

_[email protected] commented:_

Which version of PhantomJS are you using? Tip: run 'phantomjs --version'.
1.8.0 development

What steps will reproduce the problem?

1. execute phantomjs rasterize.js multi_headers.html table_test.pdf "a4"
   2.
   3.

What is the expected output? What do you see instead?
Table headers without pagebreaks and headers not overlapping content.

Which operating system are you using?
OSX Mountain Lion & CentOS 6.3

Did you use binary PhantomJS or did you compile it from source?
Compiled from source

Please provide any additional information below.
See attachments

related to issue 880
http://code.google.com/p/phantomjs/issues/detail?id=880

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #927.
:star2:   7 people had starred this issue at the time of migration.

[trvrnrth]

_[email protected] commented:_

I have been working on a qt build for use with wkhtmltopdf for which I have included the phantomjs table rendering patches.

Having run into the same issues described here I've made some changes which appear to resolve them for the test cases I've tested with. The specific commit is available at https://qt.gitorious.org/~trvrnrth/qt/trvrnrths-qt/commit/498a2ec9bf615ff9824f0f379adfc0cdf5658846

With a bit of luck this will be of some use to you.

[ova2]

What is the state of this issue? It is still present in 1.9.0.

[JamesMGreene]

Rule that holds true 99% of the time: if there is no update on the Issue, then there is no update on the issue.

[funch]

Much needed. Does anyone have an idea of how to solve it?

[Padam87]

Also having this issue.

[aylwyne]

This is affecting my project as well. I'm using the binary 1.9.7 64 bit linux-x86 release.

[meoblast001]

I've been looking for a workaround and believe to have found one. It may also uncover details to the source of the problem. This issue seems to only occur for me when the table is the first element on the page. Put anything before it and the headers break normally again. I even used an &nbsp, which is enough to fix the issue without changing the appearance of the page. Does this work for anyone else?

EDIT: Adding an &nbsp does seem to affect the page. The extra space bumps the table down a line, so the top margin on the first page will be a bit larger.

[skyrocknroll]

I tried @meoblast001 . Since my page is too dynamic and it has many tables of many size it didnt work for me. I tried injecting &nbsp on everypage using the header feature of phantomjs it didnt work.

I have set the page top margin from 1cm to 0.75 cm worked for me. I am not sure it will work all the cases. If the issues occurs again i will update here.

Edit: The issue occured again today.

[HeikoErhardt]

Unfortunately none of the workarounds described above seems to work for me.
I am rendering the page to PDF.
Explicitely setting the height of the header cells helps somewhat.

thead td {
...
line-height: 3.4em;
height: 3.4em;
...
}

However, this seems to lead to an incorrect computation of the content lenght of the page, resulting in empty pages and nasty layout bugs (see image).

Since this looks really awful, I somehow need to get rid of this.
I am offering to pay for this to be resolved.
I am accepting a solution if

• this does not appear any more in any of my use cases
• the solution is availble for Windows and Linux (the latter one being more important).
• the fix is available mid of Oct 2014 (latest end of Oct).
  Preferrably, the solution should be a real fix for this issue, but a workaround that does the job for my particular use case would also be fine.
  If you are interested and have the knowledge this requires, please contact me directly using [email protected]

[chrispbailey]

This fixed it for me: thead {display: table-row-group;}

[skyrocknroll]

@chrispbailey +1 your solution worked for me thanks a lot man :)

[timmipetit]

I'm also having this issue. The workaround from @chrispbailey removes the overlap, but you lose the elements on all but the first page of the table. This can be a problem for very long tables (that need multiple pages to render)

[CindyConway]

Yikes, this is a bear. My solution is far from ideal, but workarounds tend to be that way. Sometimes you just need to make it work. The only reliable fix I found was to put the table header in the header for the page itself; using pageSize. So basically I:

• created an HTML table that has no <thead> because anything in thead was repeating on each page.
• I did, however, put the headings in the HTML, I just did it right in <table>
• I return a string in the pageSize header that repeats the table header on each page

With a little styling, it looked pretty good.

_Original HTML table_

    <table class="grey-border">
          <tr>
            <th class="small p1">Division</th>
            <th class="small p1">Division Contract</th>
            <th class="small p1">Record Category</th>
            <th class="small p1">Record Title/ Description</th>
            <th class="small p1">Document Link</th>
            <th class="small p1">Retention Category</th>
            <th colspan="3" class="center small p1">Retention Period</th>
            <th class="small p1">Remarks</th>
          </tr>
          <tr ng-repeat="record in scheduleCtrl.draft.record | orderBy:['division','category']"  ng-class-even="'grey-background'" ng-class="'grey-border'">
            <td class="p1 grey-border small">{{record.division}}</td>
            <td class="p1 grey-border small">{{record.division_contact}}</td>
            <td class="p1 grey-border small">{{record.category}}</td>
            <td class="p1 grey-border small">{{record.title}}</td>
            <td class="p1 grey-border small">{{record.link}}</td>
            <td class="p1 grey-border small">{{record.retention}}</td>
            <td class="p1 grey-border small">{{record.total}}</td>
            <td class="p1 grey-border small">{{record.on_site}}</td>
            <td class="p1 grey-border small">{{record.off_site}}</td>
            <td class="p1 grey-border small">{{record.remarks}}</td>
          </tr>
      </table>

_On the phantomjs side:_

var paperConfig = {
        format: 'legal',
        orientation: 'landscape',
        margin:'0.75cm',
        header: {
          height: "2cm",
          contents: ph.callback(function(pageNum, numPages) {
            if(pageNum == 1) {return;}

            var style = '<style> \
                          td{border: solid 1px #eee;}\
                          table{table-layout:fixed; \
                                width: 100%; \
                                border:none; \
                                border-collapse:collapse; \
                                font-size:80%; \
                                font-weight:bold; \
                                font-family: "Raleway"; \
                                margin:0px;} \
                          tr{border-right: 1px solid #eee;} \
                          .p1{padding:1em;} \
                          body{margin:0px;} \
                        </style>'
            var header = '<table> \
                      <tr> \
                      <td class="p1">Division</td> \
                      <td class="p1">Division Contract</td> \
                      <td class="p1">Record Category</td> \
                      <td class="p1">Record Title/ Description</td> \
                      <td class="p1">Document Link</td> \
                      <td class="p1">Retention Category</td> \
                      <td class="p1"colspan="3">Retention Period</td> \
                      <td class="p1">Remarks</td> \
                      </tr> \
                      <tr> \
                      <td></td> \
                      <td></td> \
                      <td></td> \
                      <td></td> \
                      <td></td> \
                      <td></td> \
                      <td>Total</td> \
                      <td>On-site</td> \
                      <td>Off-site</td> \
                      <td></td> \
                      </tr>\
                      </table>'

            return style+header;
          })
        }
      };

      page.set('paperSize', paperConfig, function() {
        var fileName = 'test_' +  Math.floor((Math.random() * 100) + 1) + '.pdf';
        page.render(fileName, function() {
          page.close();
          ph.exit();
        });
      });

[brycepj]

I was having this issue, and just got rid of thead and moved its content into a new row in tbody. You can still style it differently than other tabular data by hooking into tr:first-of-type and th's. May not work for everyone who stumbles onto this page, but it worked for me.

[agairing]

an additional element at the top of the page - before the table - did solve my issue.

[ChaseJ]

I solved the issue by adding the following class to my table.

.table-fix {
    margin-left: 1px;
}

[Levino]

I "fixed" this by removing the font size css attribute for my p tags.

My tipp: Remove all styles. Then do binary search for the "breaking style". Found a hint to this here: https://github.com/ariya/phantomjs/pull/11490

Comment from @ashkulz

@bruno-c: I too initially thought that using this branch made not much difference; however please
check your CSS. If you have an overflow definition in your CSS for parent elements
(e.g. enclosing DIVs) then the above fixes do not help at all.0

Edit: Even more precisly it came from the fact that the content of the tds in the rows was wrapped in p tags but the content of the tds in the thead section was not. So different font sizes in the thead and in the tbody seemed to be the issue.

[vjchem]

In case it helps anyone, I just "fixed" an occurrence of this by specifying a width and min-height on the first column. We had one table where this never happened and one where it always happened, was able to narrow it down to that. We're using bootstrap, so in our case it was adding class col-sm-1 to the first th in the header.

[giaosudau]

@chrispbailey thanks.
It works for me too.
But tfoot also has the same problem so I do
thead, tfoot {display: table-row-group;}

[b-malone]

Thanks @brycepj -- that fix of switching out the table-header worked well for me, too.

[jasonb-vbt]

@giaosudau's thead, tfoot {display: table-row-group;} worked for me, too. Thanks!

[walter-psjr]

I had the same problem and solved by replacing the blanks by   the table thead. For example:

<table>
    <thead>
        <tr>
             <th>It&nbsp;is&nbsp;an&nbsp;example<th>
        </tr>
    </thead>
    ...
</table>

[johnhyde]

I had the same problem until I added <br/> into thead after my actual headings:

<table>
    <thead>
        <tr>
            <th>Heading 1</th><th>Heading 2</th><th>Etc.</th>
        </tr>
        <br/> <!-- Fixes everything somehow -->
    </thead>
    <tbody>
        <!--rows-->
    </tbody>
</table>

[RobMaple]

For me, removing line-height from body fixed it.

[stale[bot]]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!