<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<style>
.page-header, .page-header-space {
height: 80px;
}
.page-footer, .page-footer-space {
height: auto;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
/* border-bottom: 1px solid black; for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
@page {
/* margin: 20mm*/
margin-top: 0.25in;
}
@media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
body {margin: 0;}
}
</style>
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
</div>
<!--
<div class="page-footer">
I'm The Footer
</div>
-->
<table>
<thead>
<tr>
<td>
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- 内容一定要在 td 内 -->
<!-- 内容区 -->
<table class="table-bordered w-100 d-print-table">
<thead>
<tr><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td></tr>
</thead>
<tbody>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>
</tbody>
</table>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus sceler
</div>
<!-- ./ end 内容区 -->
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。