CSS page-break-before не работает в строке таблицы
У меня есть такая таблица HTML:
<table>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr class = "page-break">
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
Что я пытаюсь сделать, так это применить разрыв страницы перед третьей строкой при печати.
Я применил следующий CSS:
@media print {
tr.page-break {
page-break-before: always;
}
}
Что абсолютно ничего не дало, я применил display: block к этому CSS-коду следующим образом:
@media print {
tr.page-break {
page-break-before: always;
display: block;
}
}
Он не разрывает страницы, а также портит мою таблицу при печати, что я делаю не так?
@ user979331 - правка, которую я ввел в ответ, является наиболее авторитетным решением этой проблемы, по-видимому, это известная проблема, с которой многие сталкивались, но лучшего решения пока нет. Не могли бы вы принять ответ? Счастливых праздников..
Ответы 2
Попробуйте следующее: @media print не требуется
table tr.page-break{
page-break-inside: avoid;
page-break-before: always;
}
вам может потребоваться указать ширину столбцов.
ИЛИ
с @media print
@media print {
.page-break { page-break-before: always; }
}
Я пробовал это в Chrome и Safari, и это не работает
Если вы используете запросы к печатным носителям, лучше всего добавить !important к стилям, указанным в запросе к печатным носителям (это один из немногих случаев, когда рекомендуется добавлять !important!)
Пытаться:
@media print {
tr.page-break {
page-break-before:always!important;
}
}
и посмотрим, как у вас дела ... Надеюсь, это поможет
Обновлено:
Измените свой CSS, включив в него следующее:
@media print {
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group }
table.report tfoot { display:table-footer-group }
}
Фух!
@ user979331 также убедитесь, что класс определен в основном CSS. У вас может быть .pbrk {} (пустой класс) или вместо этого вы можете просто добавить небольшой верхний край (1px или 2px или что-то в этом роде). Я бы выбрал последнее
Я нашел этот ответ stackoverflow.com/questions/45046834/…, который дает исчерпывающее объяснение. (в основном он говорит, что в строке таблицы должно быть 2 блока, даже если один пуст, и ставит разрыв страницы перед вторым). Другой вопрос, на который он ссылается, имеет другой ответ с 97 голосами! Вы можете попробовать это ... Любопытно, что это такая большая проблема ...
Это вроде работает, это разрывает страницу, но он создает очень-очень длинную ячейку таблицы с рамкой, она показывает первые две строки, делает разрыв страницы, затем на второй странице есть очень длинная ячейка с границей ( всего одна ячейка), а затем выполните следующие строки.
@ user979331, если он показывает только 2 строки, я скажу поставить разрыв страницы после? (вместо page-break-before?), если у вашей таблицы есть граница, это приведет к тому, что она будет выглядеть длинной, в зависимости от высоты строк таблицы.
page-break-before => Вы не можете использовать это свойство для пустого <div> или для абсолютно позиционированных элементов.