Предотвращение разрыва страницы между экраном и телом при печати - PullRequest
Новая
       31

Предотвращение разрыва страницы между экраном и телом при печати

1 голос
/ 09 июля 2020

У меня есть некоторый динамический c контент, и при печати я обнаружил, что браузеры вставляют разрыв страницы между таблицами <thead> и следующими <tbody>, что приводит к таким вещам, как этот снимок экрана, в зависимости от предыдущего динамического c content.

Я хочу, чтобы он переместил таблицу / заголовок на следующую страницу в этом случае, чтобы у меня не было самого заголовка.

break-after: avoid похоже, что это должен быть Правило CSS для этого, я пробовал его на комбинациях thead, содержащегося tr и th, но, похоже, это не имеет никакого эффекта.

В основном пробовал Chrome, у меня были похожие результаты в Firefox, я бы хотел, чтобы это работало во всех основных браузерах, если это возможно.

Во многих случаях таблицы подходят для текущей страницы, поэтому я не хочу начинать каждую таблицу на новой странице. Они также могут быть длиннее одной страницы и должны иметь возможность разбиваться где-то между строками.

image 

      table {
        border-collapse: collapse;
      }
      thead {
        break-after: avoid; /* No effect */
      }
      thead tr {
        break-after: avoid; /* No effect */
      }
      thead tr th {
        break-after: avoid; /* No effect */
      }
      td, th {
        border: 1px solid #A0A0A0;
        padding: 0.2em 0.5em;
      }
      td {
        vertical-align: top;
      }
      td p:first-child { margin-top: 0; }
      td p:last-child { margin-bottom: 0; }
<div style="border: 2px solid red; width: 200px; height: 240mm">
  <p>Consume Space</p>
  <p>Required height for effect is browser dependent</p>
  <button onclick="window.print()">Print</button>
 </div>
<table>
  <thead><tr><th><div>Name</div></th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
  <tbody>
    <tr><td>A</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>B</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>C</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>D</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 09 июля 2020

Как видите, печать на СМИ решает вашу проблему 

table {
        border-collapse: collapse;
      }
      thead {
        break-after: avoid; /* No effect */
      }
      thead tr {
        break-after: avoid; /* No effect */
      }
      thead tr th {
        break-after: avoid; /* No effect */
      }
      td, th {
        border: 1px solid #A0A0A0;
        padding: 0.2em 0.5em;
      }
      td {
        vertical-align: top;
      }
      td p:first-child { margin-top: 0; }
      td p:last-child { margin-bottom: 0; }
@media print {
  table {page-break-inside: avoid;}
}
<div style="border: 2px solid red; width: 200px; height: 240mm">
  <p>Consume Space</p>
  <p>Required height for effect is browser dependent</p>
  <button onclick="window.print()">Print</button>
 </div>
<table>
  <thead><tr><th><div>Name</div></th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
  <tbody>
    <tr><td>A</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>B</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>C</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>D</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
  </tbody>
</table>

Вы можете поиграть с этим для получения желаемого результата.

...