when printing page table rows/cells get random heights

Question

I have to print very large tables with headers on every page using Google Chrome. For that I'm splitting my main table in small ones and adding a page break between them (I've tried to use only CSS like thead {display: table-header-group;} or position: fixed but Chrome doesn't accept it, so splitting tables is the only solution that work for me).

Everything goes well with the exception of some rows/cells that get random heights. I've tried to change the CSS to fix this problem, but when I am changing Cell margin or Cell padding I am just changing row that changes its height.

My HTML looks like:

<table>
  <!-- my table content -->
</table>
  <div style="page-break-before: always;page-break-inside: avoid;"></div>
<table>
  <!-- my table content -->
</table>

[here](http://postimg.org/image/l7nnlwy2d/) you can see how my table look after row/cell get random height — costica harea, Mar 27 '15 at 05:14
[This](http://stackoverflow.com/a/25737442/2759272) is probably the only solution that will give you what you want. — DoctorDestructo, Apr 02 '15 at 01:41
@DoctorDestructo i didn't had a problem in repeating headers, the problem was in getting some rows/cells with random height in generated pdf by chrome, in HTML everything was good. — costica harea, Apr 02 '15 at 12:01
The answer I linked doesn't just repeat the headers, it also prevents rows from breaking, which is the main problem I'm seeing in your image. You don't have to include headers in the table if you don't want them. If you *do* want headers, but don't want them to repeat, just don't put them in a `` element. Regarding "random heights", I'm not seeing that in your image, unless you're talking about the cell in the middle that spans across the whole table. — DoctorDestructo, Apr 02 '15 at 16:05
@DoctorDestructo row got breaked because one row got heighter for unknown reason(only on print), this happens only in _Chrome_, in _Fire Fox_ everything goes well, but i am using only chrome for my project and can't switch to _Fire Fox_ for printing only — costica harea, Apr 04 '15 at 07:21

score 1 · Answer 1 · edited May 23 '17 at 11:50

This is by far the easiest and most reliable way to handle multi-page table printing that I know of. If you just want to take control of your table's row height, though, you can do that with CSS. The CSS below will ensure that the only things affecting the height of your rows are 1) the height of the cell content, and 2) the thickness of the horizontal cell borders (and I'm assuming there isn't any other CSS or relevant HTML attributes that you haven't told us about):

<style>
table {
  border-collapse: collapse;
  /*^^^ merges adjacent cell and table borders (so table height != sum of row heights!)*/
  border-spacing: 0 0; /*removes space between cells*/
  -webkit-border-vertical-spacing: 0;
  /*^^^ removes Chrome's border-spacing (sort of redundant with border-spacing: 0 0;)*/
}
table > thead {
  vertical-align: bottom;
  /*^^^ affects the height of rows that get broken by page breaks*/
}
table > tbody {
  vertical-align: top;
  /*^^^ affects the height of rows that get broken by page breaks*/
}
table > * > * > td,
table > * > * > th {
  border: 1px solid black;
  padding-top: 0; /*cancels out browser's default cell padding*/
  padding-bottom: 0; /*cancels out browser's default cell padding*/
}
</style>

That won't necessarily prevent your last row from getting split by a page break, though. If you're trying to predict how many rows you can squeeze onto a page, you should probably give up on that approach for the following reasons:

You can't control paper size.
You can't control paper orientation.
You can't reliably control margin size.
Print rendering works differently in different browsers, so content that fits on one page in Firefox or IE may require two pages in Chrome.

If you really want to solve these problems, you should consider using the solution I linked at the top of this post.

when printing page table rows/cells get random heights

1 Answers1