Разрешить разрывы страниц внутри элементов tr и td

Question

Я пытаюсь создать таблицу с одним столбцом, которая допускает разрыв страницы внутри ячеек tr и td.Ниже приведен только пример, но в моей фактической таблице много чего происходит внутри каждой ячейки.

<table>
  <thead>
    <tr>
      <th>TABLE HEADER</th>
    </tr>
  </thead>
  <tbody>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
    <tr><td><div class="my-cell">Hello World</div></td></tr>
  </tbody>
</table>

Я использую следующий стиль, чтобы увидеть, где ячейки начинаются и заканчиваются:

.my-cell {
  padding: 160px 40px;
  border: 1px solid #000;
}

Когда я печатаю эту страницу, таблица разбивается после второй строки, чтобы не разбивать третью строку:

Моя цель - предотвратить этоавтоматический разрыв страницы.Я попытался добавить следующий css, но он все еще ломается в одном и том же месте:

tr, td {
  page-break-inside: initial;
}

В любом случае разрешено ли разрывать страницы внутри элементов tr и td или это невозможно?И где это свойство на самом деле установлено?Его нет ни в инструментах разработчика Chrome, ни в документации.

Answer 1

Согласно спецификациям свойство page-break-inside применяется к элементам блока, хотя пользовательские агенты могут применять его к другим элементам:

Пользовательские агенты должны применять эти свойства к блокуэлементы в нормальном потоке корневого элемента.Пользовательские агенты могут также применять эти свойства к другим элементам, например, элементам «таблицы строк».

Таким образом, одна возможность (которая может быть не идеальной) состояла бы в изменении отображения строк при печати.поэтому они display: block вместо значения по умолчанию display: table-row.Примерно так (это слишком универсально, вам может понадобиться сделать его более конкретным):

@media print {
    tr {
        page-break-inside: initial;
        display: block;
    }
}

Я тестировал, и он отлично работает на Chrome и Safari, но, похоже, не работает на Firefox:

Answer 2

https://css -tricks.com / almanac / properties / p / page-break /

 page-break-inside : auto | avoid

Идентификационная цифра Авто может помочь.