CSS-разрыв страницы перед тем, как не работать со строкой таблицы

Question

У меня есть 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;
            }
}

Он не делает разрывов страниц и также портитчто я делаю неправильно при печати на моем столе?

Answer 1

Если вы используете запросы печатных СМИ, лучше всего добавить !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 }
 }

Источник Спасибо Маджид !

Фу!

Answer 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; }
 }