Страница div, имеющая полосы прокрутки, должна отображать все содержимое div на печати

Question

У меня есть div и таблица на моей странице:

<div id="tablediv">
    <table id="table">
         <tr><th>headers</th></tr>
         <tr><td>contents</td></tr>
    </table>
<div>

И CSS:

#tablediv {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

Так что, независимо от высоты таблицы, div будет прокручивать ее,страница не прокручивается.

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

Как я могу сделать это с @media print CSS?

Answer 1

Попробуйте перезаписать высоту в медиа-запросе. Запрос должен идти вторым, поэтому он переписывает исходное объявление.

#tablediv {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

@media print { 
    #tablediv {
        max-height: auto;
        height: auto;
        overflow: visible;
    }
}