代码之家 › 专栏 › 技术社区 › Gaurav_soni

打印时设置每页表高

bootstrap-4 css3 html

0

Gaurav_soni · 技术社区 · 7 年前

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

我试过了 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>

0 回复 | 直到 7 年前