Как я могу разделить длинную таблицу HTML, используя print-CSS, чтобы разделение таблицы на первой странице оставляло место для div в нижней части страницы? - PullRequest
Новая
       21

Как я могу разделить длинную таблицу HTML, используя print-CSS, чтобы разделение таблицы на первой странице оставляло место для div в нижней части страницы?

3 голосов
/ 05 апреля 2019

У меня есть многостраничный документ, который отображается в окне браузера.Документ представляет собой длинную таблицу и легенду.

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

enter image description here

Красная линия указывает, где я хочу разбить таблицу.

Как?

ЧтоУ меня так далеко:

В настоящее время я смог напечатать легенду внизу первой страницы, используя CSS ниже: 

    @media print {
        #legend {
            position: absolute;
            bottom: 0;
        }
    }

Но моя таблица печатается прямо надdiv легенды, накладывающийся поверх легенды.

Мне нужно, чтобы div таблицы прекратил печать до div легенды, затем распечатал div легенды, а затем продолжил таблицу на следующей странице.

Hack # 1

Я мог бы заставить разрыв страницы в определенной строке, используя 

<style>
.page-break-tr {
    page-break-after: always;
}            
</style>

<!-- row i.e. 15, which is controlled by a loop in the code -->
<tr class="page-break-tr"> 

<!-- normal row -->
<tr>

Это вроде работает, но не совсем здорово, так как этожёстко.Изменения данных таблицы, перемещение границы таблицы вверх и вниз.

Я хотел бы в идеале найти лучший способ справиться с ними.

...