Media print cutting table row

Question

I’m doing the CSS for printing a table, basically I remove all page elements and leave only the table when the print window opens. I do this using:

<link rel="stylesheet" href="/css/impressao.css" media="print" />

The problem is that when the search returns more than one page, some lines are on the two (top of the letters on one page and bottom on the other):

What better way for me to solve this?

Answer 1

Since I don’t have the code to test it is difficult to give you absolute certainty what the result will look like. But in theory, according to the documentation, you can control this fragmentation.

Each possible break point (in other words, each element limit) is affected by three properties: the break-after: valor of the previous item, the break-before: valor of the next element and the break-inside: valor of the element contained.

I won’t dwell on each of them, but you can check here the Mozilla documentation, which is more user friendly than the W3C documentation

• break-Inside https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

• break-before https://developer.mozilla.org/en-US/docs/Web/CSS/break-before

• break-after https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

In your case I believe you don’t want to cut the table in half, so use the property break-inside:avoid

@media print {
  table {
    break-inside: avoid;
  }
}

Or if you want a table to always start on a new page put

@media print {
  table {
    break-before: page;
  }
}

My tip is that if it doesn’t work out try after and before As I told you, I don’t have an environment to test that. And I recommend you read this article from Smashing Magazine, which should interest you and talk a little about the Fragmentation https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/#css-fragmentation