Avoid table border split on page break while printing

Question

My content is already on the same page, that's not what the problem is. (Some other questions on SO tackle that). My issue is with borders specificaly. See how the table border splits row 43 in two.

I would like 43 to be on the next page completely. 42 should have a bottom border and 43 should have a top border. Here is what I want. (I created this in paint)

I tried page break inside: avoid but that doesn't work. Neither does the 4px trick works. I am in latest stable chrome. 51

Answer 1

Could you please try this css code:

<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>

Avoid table border split on page break while printing

Question

1 answers

solution1
1 2016-07-04 20:46:32

Avoid table border split on page break while printing

Question

1 answers

solution1 1 2016-07-04 20:46:32

solution1
1 2016-07-04 20:46:32