This is an archived forum post. The information may be outdated. Contact us if you have any questions.

CSS display: table-header-group ignored

RobertGonzalez wrote on 2011-06-07:

I was wondering if anyone else has had this experience when converting HTML to PDF. I have a table of data I am putting into a PDF report. It is kinda long (can span up to 10 pages or more) so I want my table headers to repeat on every page.

When rendering/printing to the screen I can simply add the following CSS attribute:

table {
  display: table-header-group;
}

And my header row will repeat across the top of every page the table happens to be on. But for some reason, when I kick this markup off to the API, it ignores this. Is this a bug?

Any help would be greatly appreciated, as would any tips on hacking my way around it if it can't be done in the API.

support wrote on 2011-06-07:

This is a known bug in WebKit, which is the HTML layout engine our service is based on.

Unfortunately, I can't think of any easy workaround.

RobertGonzalez wrote on 2011-06-07:

Thank you.

So would you have any idea how I could go about "discovering" how much table content fits on a single page so I can make individual tables for each page? I'm trying to satisfy the client on this one so the report kinda needs to work properly.

Thanks for your help on this.

support wrote on 2011-06-08:

Here is an solution that uses JavaScript (jQuery). Please have a look at the following code and the splitTable() function.

You can try the code out, just copy the raw code, paste it here and convert it to PDF.

You can use splitTable() in your code like this:

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script>
       function splitTable(table, maxHeight) {
       // copy the function body here
       }

       // called when the DOM is ready
       $(function() { splitTable($(".report"), 300); });
    </script>
  </head>
  <body>
    <table class=".report">
      <thead>..</thead>
      <tbody>..</tbody>
    <table>
  </body>
</html>

There is one limitation on the <table> and <thead>.You can't use the id attribute on these elements since splitTable() clones these elements and you would end up with multiple elements with the same id