时间戳

首页 > 解决方案 > 打印时设置每页表格高度

html - 打印时设置每页表格高度

问题描述

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

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

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

标签： htmlcssbootstrap-4

解决方案

推荐阅读