0

My table header is not correctly aligned with my table body.

DEMO:

https://jsfiddle.net/DTcHh/18178/

I am using the following CSS:

table tr { /* FOR PRINTING */
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: table; /* Here*/
}

table thead tr { /* Override for the above - need to fix */
    display: table-row; /* Here*/
}

I am using the display table on the tr to ensure the rows dont overlap onto two pages when printing.

However using this on the tr totally messed up the table head. Therefore i used table-row on the thead tr to fix the header.

However now this fix doesn't correctly align the table head with the body. I need the display table on the table tr for printing.

Is there anyway i can correctly align these up with ensuring that the rows dont overlap when printing.

Anyone???

Or is there a way to get the page break working without the display: table on the tr??

John
  • 1,777
  • 9
  • 42
  • 66
  • I'm working on it, but I can say that you do have errors in your CSS here: `html, body { padding: 0, margin: 0;}`. It should be: `html, body { padding: 0; margin: 0;}` – Scott Marcus Mar 12 '16 at 21:49
  • ah good spot, thanks for that. I know if i just set them both to display: table-row it would work fine on screen, but i need to keep that display: table on the tr for the printing as it breaks the row onto the next page. Without this it doesn't print correctly. Keeping it doesn't align correctly. Driving me crazy, hopefully theres a way, thanks for looking – John Mar 12 '16 at 21:53
  • Is it possible for you to post a sketch of what the layout should be in normal display and in print display? – Scott Marcus Mar 12 '16 at 22:27
  • if you just remove display: table from the table tr css it will fix the layout: Like this https://jsfiddle.net/DTcHh/18179/ This is how the print layout needs to look. but i need to keep that above style in there to stop the rows from overlapping on to two pages when printing. – John Mar 12 '16 at 22:35
  • And the `{ page-break-inside: avoid; }` isn't doing that for you already? – Scott Marcus Mar 12 '16 at 22:59
  • No if i take that display: table out it doesn't work, I really don't see why this is needed. Without it, the row merges on two pages – John Mar 12 '16 at 23:01
  • I came accros this post: http://stackoverflow.com/questions/7706504/page-break-inside-doesnt-work-in-chrome which addresses table rows in the comments. It says: "To avoid wrapping table rows, you must set the row as block and keep the cells as table-cell. But it breaks the table layout if there is not enough space." Have you looked into this? – Scott Marcus Mar 12 '16 at 23:17
  • just gave that a quick go with no joy http://www.bootply.com/LoU6fd6qL2 click the little desktop icon on the right within the HTML pane then try print preview in Chrome... im lost – John Mar 12 '16 at 23:33
  • I have to head out for the night, but I'll check back tomorrow if I can and see what I can come up with. – Scott Marcus Mar 12 '16 at 23:36
  • ok, thanks, maybe it doesn't need the display: table and its other issues not making the page break work correctly?? – John Mar 13 '16 at 09:13

0 Answers0