打印網(wǎng)頁時(shí)需設(shè)置自定義的頁眉頁腳，CSS沒法直接設(shè)定；但可以利用table的特性，間接實(shí)現(xiàn)類似的效果：
實(shí)現(xiàn)效果
網(wǎng)頁結(jié)構(gòu)代碼
<!DOCTYPE html>
<head>
<style>
/* @media print 限定樣式，只作用于打印頁 */
/* @media print { */
@page {
/* 設(shè)置每頁頂部、底部間距 { */
margin: 20px inherit;
}
.page-wrap {
width: 100%;
text-align: center;
}
.page-wrap thead th,
.page-wrap tfoot td {
height: 40px;
line-height: 40px;
font-size: 16pt;
color: red;
border-bottom: 1px solid #ddd;
}
.page-wrap tfoot td {
color: blue;
border-top: 1px solid #ddd;
border-bottom-width: 0;
}
/* } */
</style>
</head>
<body>
<table class="page-wrap" cellspacing="0" cellpadding="0">
<!-- style="display:table-header-group;" -->
<thead>
<tr>
<!-- 若是表格頁，存在多列情況，記得按需求設(shè)置colspan合并頭部和底部的列 -->
<th>
<h3>頁眉內(nèi)容</h3>
<span>可將thead>th作為一個(gè)頂部的div使用，隨意按需求填放模塊內(nèi)容</span>
</th>
</tr>
</thead>
<tr>
<td id="content"></td>
</tr>
<!-- style="display:table-footer-group;" -->
<tfoot>
<tr>
<td>
<h3>頁腳內(nèi)容</h3>
<span>可將tfoot>td作為一個(gè)頂部的div使用，隨意按需求填放模塊內(nèi)容</span>
</td>
</tr>
</tfoot>
</table>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
let table = document.getElementById('content'),
htm = '頁面內(nèi)容……將tbody>td作為頁面內(nèi)容區(qū)，按需填放內(nèi)容';
for(let i = 0; i < 100; i++) {
htm += '<div>頁面內(nèi)容'+(i+1)+'</div>';
}
table.innerHTML = htm;
})
</script>
</body>
</html>
利弊分析：
- 利：
- 可以自由設(shè)置內(nèi)容樣式，無太大限制（注意只用打印支持的CSS樣式）；
- 將th/td當(dāng)作div使用，不受table布局限制。
- 弊：
- 最后一頁若內(nèi)容較少，頁腳會(huì)追在內(nèi)容區(qū)后方，而不會(huì)處于頁面最下端
