gpt4 book ai didi

html - 通过css在打印中将标题添加到html页面

转载 作者:行者123 更新时间:2023-11-28 07:16:05 25 4
gpt4 key购买 nike

我想用现代浏览器打印 html 页面,并在打印的每一页上添加页眉。在 Internet 上找到但在现代浏览器中不起作用的技术。有办法做到这一点吗?

我添加了在现代浏览器中不起作用的示例。

	$(document).ready(function(){
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
});
    table{
border:none;
}
tr{
display:block;
}
td, th{
width: 100px;
}
tbody tr.head {
page-break-before: always;
page-break-inside: avoid;
}
@media screen {
tbody .head{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr class="head">
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr class="start">
<td>January</td>
<td>2010</td>
</tr>
<tr>
<td>February</td>
<td>2010</td>
</tr>
<tr>
<td>March</td>
<td>2010</td>
</tr>
<tr>
<td>April</td>
<td>2010</td>
</tr>
<tr>
<td>May</td>
<td>2010</td>
</tr>
<tr>
<td>June</td>
<td>2010</td>
</tr>
<tr>
<td>July</td>
<td>2010</td>
</tr>
<tr>
<td>August</td>
<td>2010</td>
</tr>
<tr>
<td>September</td>
<td>2010</td>
</tr>
<tr>
<td>October</td>
<td>2010</td>
</tr>
<tr>
<td>November</td>
<td>2010</td>
</tr>
<tr class="end">
<td>December</td>
<td>2010</td>
</tr>
</tbody>
</table>
</body>

最佳答案

试试这个例子

使用media query用于屏幕和打印的自定义样式

CSS

@media screen {
.page-header { display: none; }
.page-footer { display: none; }
}

HTML代码

<body>
<p class="page-header">Page header goes here</p>

your Webpage main content goes here

<p class="page-footer">Page footer goes here</p>
</body>

关于html - 通过css在打印中将标题添加到html页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32346599/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com