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

标签 html css google-chrome firefox

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

相关文章:

javascript - onclick 也重定向到 "form action"

javascript - 淡入淡出

javascript - 在项目数据源中记录电话号码和全名

javascript - Chrome-alert() 的 JavaScript 执行顺序问题

javascript - 减慢浏览器的连接速度以进行测试

css - Twitter Bootstrap 行 div 不起作用

javascript - 脚本5007 : Expected object in IE9 on Canvas HTML5

html - 手机上的网格布局问题

javascript - 拖放到 HTML5 Canvas

javascript - 从屏幕左侧滑动到内容右侧