html – CSS打印带备忘录的多页表

html – CSS打印带备忘录的多页表,第1张

概述我必须打印通过几个页面的大型 HTML表.每个页面都应该有备忘录(页眉和页脚,公司名称和内容).我正在使用带有TableTools的jQuery-datatables.这是我的CSS @media print{ @page{ margin: 150px 0px 150px 0px !important; padding: 0px !important; 我必须打印通过几个页面的大型 HTML表.每个页面都应该有备忘录(页眉和页脚,公司名称和内容).我正在使用带有tableTools的jquery-datatables.这是我的CSS

@media print{    @page{        margin: 150px 0px 150px 0px !important;        padding: 0px !important;        size: A4 portrait;    }    table { page-break-after:auto;}    tr    { page-break-insIDe:avoID; page-break-after:auto }    td    { page-break-insIDe:avoID; page-break-after:auto }    thead {        display:table-row-group;    }    HTML{        background-image: url(memo.png) !important;        background-size: 200mm 287mm !important;    }}

然而,当将最高边距设置为@page时,它会“移动”所有内容(包括)背景.我想知道是否有办法从@page到表格应用保证金,但在设置背景时要避免它,或者将背景图像添加到@page

我还尝试将@page margin设置为0,将表余量设置为150px.它在第一页上很好,但由于表被分成几页,它忽略了其他页面上的边距.

UPDATE

我添加了一些错误和想要结果的草图.红色是标题,蓝色是页脚,绿色是表格

解决方法 你可以添加一个空的(第一行到你的)< thead&gt ;?在屏幕上查看表格时隐藏它,打印时将其高度设置为150像素. 桌子的每一页都重复着thead.这意味着每个页面都以空行开头,为公司徽标腾出空间并向下推送数据. 同样,在你的< tfoot>中添加一个空的最后一行.在桌子的每个页面的底部腾出空间. 总结

以上是内存溢出为你收集整理的html – CSS打印带备忘录的多页表全部内容,希望文章能够帮你解决html – CSS打印带备忘录的多页表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1052732.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-25
下一篇2022-05-25

发表评论

登录后才能评论

评论列表(0条)

    保存