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

打印时设置每页表高

  •  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 年前
    推荐文章