CSS:分页后重复表头(打印视图)

2023-02-15前端开发问题
97

本文介绍了CSS:分页后重复表头(打印视图)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我有用于打印重复页眉和页脚的 html 表格.一切正常,文档自动中断.但现在我想在任何元素之后打破页面.我使用 css 属性 page-break-after 并将其设置为始终.是的,它的作品,但我有另一个问题.休息后的页面不要重复表格的页眉和页脚.怎么了?

I have html table for printing with repeat header and footer. Everything works, document to break automatically. But now i would like to break page after any element. I use to css property page-break-after and set it to always. Yes, its works, but i got another problem. Page after break dont repeat header and footer of table. What is wrong?

浏览器:IE8.

打印样式:

table thead {display: table-header-group;}
table tfoot { display: table-footer-group;}
table tbody { display: table-row-group;}
.page-break { page-break-after:always;}

HTML代码:

<table>
<thead>
    <tr>
        <th>...</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <td>...</td>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td>page 1</td>
    </tr>
    <tr class="page-break">
        <td>content</td>
    </tr>
    <tr>
        <td>Page 2</td>
    </tr>
    <tr>
        <td>content 2</td>
    </tr>
</tbody>
</table>

推荐答案

尝试添加以下css:

thead {display: table-header-group;}

页脚不在每一页重复,而是打印在最后一页只在IE8,iirc中.

The footer is not repeated on each page, but rather printed on the last only in IE8, iirc.

这篇关于CSS:分页后重复表头(打印视图)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5

如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社...
2024-04-20 前端开发问题
6