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

具有滚动条的页面div，需要在打印时显示整个div内容

1 个答案: