我想用现代浏览器打印 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/