table表格打印自动分页的实现思路
主要是要用到 thead 标签或者 tfoot 标签实现自动分页
利用 css样式和 th 标签占位的方法解决自动分页后每页底部会出现一条横线的问题
利用page-break-inside样式实现
首先简单写一个table表格。先做一个表头、表尾自动分页后，在后一页会自动加到表格头部和尾部的例子
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table表格打印测试</title>
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
font-size: 12px
}
table {
width: 80%;
margin: 10px;
border: 1px solid #000;
border-collapse: collapse;
margin: 5px auto
}
th,
td {
border: 1px solid #000;
border-collapse: collapse;
padding: 8px 5px
}
h1 {
font-size: 24px
}
@media print {
.no-print {
display: none;
}
}
</style>
</head>
<body>
<div class="no-print" style="text-align:center;margin:5px">
<button onClick="window.print()"> 打 印 </button>
</div>
<div class="table-box">
<table>
<thead>
<tr>
<th colspan="5">
<h1>XXXX报表</h1>
</th>
</tr>
<tr>
<th> 序号 </th>
<th> 栏目1 </th>
<th> 栏目2 </th>
<th> 栏目3 </th>
<th> 栏目4 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 2 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 3 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 4 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 6 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 7 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 8 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 9 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 10 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 11 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 12 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 13 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 14 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 15 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 16 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 17 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 18 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 19 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 20 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 21 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 22 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 23 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 24 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 25 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 26 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 27 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 28 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 29 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 30 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 31 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 32 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 33 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 34 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 35 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 36 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 37 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 38 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合计： </th>
<th> </th>
<th> </th>
<th> 300.00 </th>
<th> 300.00 </th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>可以看到页面效果
然后点击打印，可以看到第一页内容超出后自动分到第二页
接下来写一个没有表头和表尾的表格打印，内容自动分页的实现方法
其实还是利用 thead 标签实现自动分页的效果，直接上代码吧
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html打印测试</title>
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
font-size: 12px
}
table {
width: 80%;
margin: 10px;
border-collapse: collapse;
margin: 5px auto
}
th,
td {
border: 1px solid #000;
border-collapse: collapse;
padding: 8px 5px
}
thead {
border: none;
}
thead tr {
border: none;
}
thead tr th {
border: none;
border-collapse: separate;
}
h1 {
font-size: 24px
}
@media print {
.no-print {
display: none;
}
}
</style>
</head>
<body>
<div class="no-print" style="text-align:center;margin:5px">
<button onClick="window.print()"> 打 印 </button>
</div>
<div class="table-box">
<table>
<caption align="top">
<h1>XXXX报表</h1>
</caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 2 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 3 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 4 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 6 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 7 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 8 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 9 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 10 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 11 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 12 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 13 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 14 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 15 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 16 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 17 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 18 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 19 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 20 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 21 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 22 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 23 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 24 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 25 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 26 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 27 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 28 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 29 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 30 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 31 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 32 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 33 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 34 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 35 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 36 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 37 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
<tr>
<td> 38 </td>
<td> 数据1 </td>
<td> 数据2 </td>
<td> 数据3 </td>
<td> 数据4 </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>直接看打印的效果
有时候table表格打印的时候会遇到 自动分页时每页最底部有一根横线
解决的方法是在thead的tr中加入th标签占位和利用css样式解决，直接上代码
<style type="text/css">
/* tfoot, */
thead {
border: none;
}
/* tfoot tr, */
thead tr {
border: none;
}
/* tfoot tr th, */
thead tr th {
border: none;
border-collapse: separate;
}
</style>
<table>
<caption align="top">
<h1>XXXX报表</h1>
</caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<!-- 此处代码省略 -->
</tbody>
<table> 
完美解决自动分页后底部出现横线的问题。
今天才发现CSS2中 page-break-inside 样式就可以实现表格的跨页打印
浏览器支持
| 属性 | Chrome | IE | Firefox | Safari | Opera |
| page-break-inside | 1 | 8 | 19 | 1.3 | 7 |
一、定义和用法 （page-break-inside）
page-break-inside 属性设置元素内部的 page-breaking 行为。
尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。
应用于：position 值为 relative 或 static 的非浮动块级元素。
注释：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
| 值 | 描述 |
|---|---|
| auto | 默认。如果必要则在元素内部插入分页符。 |
| avoid | 避免在元素内部插入分页符。 |
| inherit | 规定应该从父元素继承 page-break-inside 属性的设置。 |
<style type="text/css">
tbody tr td {
page-break-inside: avoid;
border: 1px solid #000;
border-collapse: collapse;
}
</style>
<table>
<caption align="top">
<h1>XXXX报表</h1>
</caption>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
<table>
1919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
