我有一个页脚在每一页重复的页面。页面的主要内容是一个长表,包含多个页面。
我试过了
page-break-inside: avoid;
如果有帮助的话,我正在使用引导程序。
<html>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<body style="padding-top:20px">
<div class="container">
<div class="row">
Header Section
</div>
<br>
<table class="table table-striped table-bordered">
<thead>
<tr style="background-color:yellow">
<th scope="col">S.No</th>
<th scope="col">Item Description</th>
<th scope="col">Qty</th>
<th scope="col">Unit Price</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>CAT 6 Outlet - Optronics CAT6 Single Outlet( Connector + Module + Faceplate)</td>
<td>40</td>
<td>30</td>
<td>5000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Patch Panel - Optronics 24-Port Patch Panel Loaded</td>
<td>10</td>
<td>20</td>
<td>2000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Brush Panel - Optronics Cable Manager Brush</td>
<td>500</td>
<td>10</td>
<td>20000</td>
</tr>
<tr>
<td></td>
<td>Grand Total (AED)</td>
<td></td>
<td></td>
<td>501000.00</td>
</tr>
</tfoot>
</table>
{{!-- Page Footer --}}
<div class="fixed-bottom">
<hr>
**** FOOTER SECTION ****
</div>
</div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</html>
