Question

我有一个页脚，页面在每页都重复。该页面的主要内容是一个包含多个页面的长表。

我需要修复每页的行数，以便在打印页面时不会与页面页脚重叠。

我在页脚上尝试了page-break-inside: avoid;，但它不起作用。

如果有帮助，我正在使用bootstrap。

<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>

打印时设置每页的表高度

0 个答案: