Html 在打印页面上使用Google Chrome重复表格标题
我希望在每个打印页面上重复我的表格标题，但是Google Chrome似乎不支持Html 在打印页面上使用Google Chrome重复表格标题,html,google-chrome,html-table,Html,Google Chrome,Html Table,我希望在每个打印页面上重复我的表格标题，但是Google Chrome似乎不支持标签……有办法解决这个问题吗？我正在使用谷歌Chrome v13.0.782.215 表格代码非常简单…没有什么特别之处： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
@page {
size: landscape;
margin-top: 0;
margin-bottom: 1cm;
margin-left: 0;
margin-right: 0;
}
table {
border: .02em solid #666; border-collapse:collapse;
width:100%;
}
td, th {
border: .02em solid #666; font-size:12px; line-height: 12px;
vertical-align:middle; padding:5px; font-family:"Arial";
}
th { text-align:left; font-size:12px; font-weight:bold; }
h2 { margin-bottom: 0; }
</style>
</head>
<body>
<h2>Page Title</h2>
<table>
<thead>
<tr class="row1">
<th><strong>Heading 1</strong></th>
<th><strong>Heading 2</strong></th>
<th><strong>Heading 3</strong></th>
<th><strong>Heading 4</strong></th>
<th><strong>Heading 5</strong></th>
</tr>
</thead>
<tbody>
<tr class="row2">
<td width="30">...</td>
<td width="30">...</td>
<td width="90">....</td>
<td width="190">...</td>
<td width="420">...</td>
</tr>
<tr class="row1">
<td width="30">...</td>
<td width="30">...</td>
<td width="90">....</td>
<td width="190">...</td>
<td width="420">...</td>
</tr>
....
</tbody>
</table>
</body>
</html>
@页面{
规模：景观；
边际上限：0；
边缘底部：1cm；
左边距：0；
右边距：0；
}
桌子{
边框：.02em实心#666；边框折叠：折叠；
宽度：100%；
}
td，th{
边框：.02em实心#666；字体大小：12px；线条高度：12px；
垂直对齐：中间；填充：5px；字体系列：“Arial”；
}
th{文本对齐：左；字体大小：12px；字体大小：粗体；}
h2{页边距底部：0；}
页面标题
标题1
标题2
标题3
标题4
标题5
...
...
....
...
...
...
...
....
...
...
....
欢迎对此有任何见解。我相信这是Chrome的一个优势。对于公司内基于浏览器的系统，我建议用户使用firefox或IE；对于面向公众的网站，我认为如果用户使用chrome或具有类似限制的浏览器（opera），我们真的无能为力。现在可以使用jQuery在chrome中打印。。。。请尝试这段代码（很抱歉，在我修改之前忘记了这段代码的创建者-我的英语不好：D呵呵）
文件标题
@媒体印刷品{
表{page break after:auto；}
tr{内部分页符：避免；}
td{内部分页符：自动；}
thead{display:table header group}
.世界其他地区流体[类别*=“跨度”]{
最小高度：20px；
}
}
@第{
边缘顶部：1cm；
右边距：1cm；
边缘底部：2cm；
左边距：2厘米；
尺寸：人像；
/*
规模：景观；
-webkit变换：旋转（-90度）；-moz变换：旋转（-90度）；
过滤器：progid:DXImageTransform.Microsoft.BasicImage（旋转=3）；
*/
};
标题1
标题2
第1节第2节
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
TD 1TD 2
jQuery（文档）.ready（函数（）
{
var printHeader=$（'#print header wrapper'）.html（）；
var div_页面断路器=“”；
每页var=25；
$（“#表_数据”）。每个（函数（索引、元素）
{
//我们有多少页的行？
var pages=Math.ceil（$（'tbody tr'）.length/每页）；
//如果我们只有一页就没有了
如果（页数==1）{
返回；
}
//去拿我们要放的桌子
变量表_至_分割=$（元素）；
var当前页面=1；
//循环浏览我们的每一页
例如（当前页面=1；当前页面更新2017-03-22：重复表标题终于在Chrome中实现了！（事实上，我认为它们是在很久以前实现的。）这意味着您可能不再需要此解决方案；只需将列标题放在
标记中，您就可以完成所有设置。仅在以下情况下使用以下解决方案：
- 你在Chrome的实现中遇到了显示停止错误
- 您需要“额外功能”，或者
- 您需要支持一些仍然不支持重复标题的古怪浏览器
解决方案（过时）
下面的代码演示了我找到的用于多页表格打印的最佳方法。它具有以下功能：
- 列标题在每页上重复
- 无需担心纸张大小或可容纳多少行，浏览器会自动处理所有内容
- 分页符只在行之间出现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DOCUMENT TITLE</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"/>
<style type="text/css">
@media print{
table { page-break-after:auto;}
tr { page-break-inside:avoid;}
td { page-break-inside:auto;}
thead { display:table-header-group }
.row-fluid [class*="span"] {
min-height: 20px;
}
}
@page {
margin-top: 1cm;
margin-right: 1cm;
margin-bottom:2cm;
margin-left: 2cm;';
size:portrait;
/*
size:landscape;
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
*/
};
</style>
</head>
<body>
<div id="print-header-wrapper">
<div class="row-fluid">HEADER TITLE 1</div>
<div class="row-fluid">HEADER TITLE 2</div>
</div>
<div class="row-fluid" id="print-body-wrapper">
<table class="table" id="table_data">
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
<tr><td>TD 1</td><td>TD 2</td></tr>
</tbody>
</table>
<div id="lastDataTable"></div>
</div>
<script type="text/javascript">
jQuery(document).ready(function()
{
var printHeader = $('#print-header-wrapper').html();
var div_pageBreaker = '<div style="page-break-before:always;"></div>';
var per_page = 25;
$('#table_data').each(function(index, element)
{
//how many pages of rows have we got?
var pages = Math.ceil($('tbody tr').length / per_page);
//if we only have one page no more
if (pages == 1) {
return;
}
//get the table we're splutting
var table_to_split = $(element);
var current_page = 1;
//loop through each of our pages
for (current_page = 1; current_page <= pages; current_page++)
{
//make a new copy of the table
var cloned_table = table_to_split.clone();
//remove rows on later pages
$('tbody tr', table_to_split).each(function(loop, row_element) {
//if we've reached our max
if (loop >= per_page) {
//get rid of the row
$(row_element).remove();
}
});
//loop through the other copy
$('tbody tr', cloned_table).each(function(loop, row_element) {
//if we are before our current page
if (loop < per_page) {
//remove that one
$(row_element).remove();
}
});
//insert the other table afdter the copy
if (current_page < pages) {
$(div_pageBreaker).appendTo('#lastDataTable');
$(printHeader).appendTo('#lastDataTable');
$(cloned_table).appendTo('#lastDataTable');
}
//make a break
table_to_split = cloned_table;
}
});
});
</script>
</body>
</html>
<style>
thead {
display: table-row-group;
}
</style>
<table>
<thead>
<tr>
<th>number</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
<script>
for (i = 1; i <= 100; i++) {
document.getElementById("myTbody").innerHTML += "<tr><td>" + i + "</td></tr>";
}
</script>
<table>
<thead>
<tr>
<td>
<img ...>
</td>
@media print { thead img { page-break-inside: auto !important; } }