Print datatable - new page

Question

I'm trying to print my datatable using javascript and css like this:

<h:commandButton value="#{portal.btnPrint}" type="submit" onclick="javascript: window.print();"/>

<p:dataTable id="tbl" var="item" value="#{myPrins.model}" ...
...
</p:dataTable>

@media print
{
  table { font-size: 80%; }
  #menu, #header, #form, #form_error { display: none; } 
  @page { size: A4 landscape !important; }
  ....
  ....
}

And, if I understand it weel, it's DOM based printing, so it just prints, what is set to be printed and visible on the screen.

Problem is, that I can't handle end of pages:

What I've tried and refused:

• styling row heigth or font size (problem happens again on the next pages)
• print the table per pages (1st page - print, 2nd page - print atc.). User-enemy for big datatable
• print header on each page using @media print { thead {display: table-header-group;} } - it works in Firefox only
• export to XLS (I can't from another reason)
• page-break-inside: avoid; doesn't work in chrome

How to print whole the datatable at once and automatically split the pages correct?

Answer 1

Emergency solution:

• Mozilla Firefox
• css: @media print { tr { page-break-inside: avoid !important; } }

New issues & advantages:

• Header is automatically on each page
• Border of table is shifted a bit to the left and top (from 2nd page)

• => I had to make top and left border of table a bit thicker enough to be visible on next pages:

  css: @media print { table { border-top: 3px solid #ACBECE; .. } }