宽度：在打印模式下使用 CSS 中的嵌套网格时不考虑 100%

问题描述 投票：0回答：1

我正在使用 

A4
、
HTML
和 
CSS
生成 
JS
发票。这在正常模式下看起来不错，但 
width
超出了 
100%
并且水平滚动条开始出现在打印预览中。

这是我的代码片段：

<html>

<head>
    <style type="text/css">
        #section-to-print {
            position: absolute;
            left: 0;
            top: 0;
        }

        body {
            font-family: Calibri, monospace;
            font-size: 0.8rem;
            margin: 1rem;
            border: 1px solid;
        }

        body ol {
            list-style: none;
            padding-left: 0;
            margin: 0.5rem 0;
        }

        table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            page-break-inside: auto;
        }

        td section div {
            page-break-inside: avoid;
        }

        thead {
            display: table-header-group;
        }

        tfoot {
            display: table-footer-group;
        }

        header {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-weight: normal;
            padding: 0 0.5rem;
            position: relative;
        }

        header h1 {
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
        }

        header h2 {
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0;
        }

        header h3 {
            font-size: 1rem;
            font-weight: normal;
            margin: 0;
        }

        header ul {
            list-style: none;
            padding-left: 0;
            margin: 0.5rem 0;
        }

        header #brand {
            border-bottom: 1px solid;
            padding: 0.25rem 0.5rem;
            text-transform: uppercase;
            width: 100%;
        }

        header #phone {
            position: absolute;
            text-align: right;
            top: 0;
            right: 0.5rem;
        }

        header #invoicedetails {
            display: grid;
            grid: "customer-billed customer-shipped invoice";
            grid-template-columns: repeat(3, 1fr);
            padding: 0 0.5rem;
            border-bottom: 1px solid;
            width: 100%;
        }

        header #customer-billed {
            text-align: left;
        }

        header #customer-shipped {
            border: 1px solid;
            border-top: 0;
            border-bottom: 0;
            padding-left: 0.5rem;
            text-align: left;
        }

        header #invoice {
            text-align: right;
        }

        table tbody td {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        main {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #invoiceitems {
            display: block;
            height: 100%;
            text-transform: uppercase;
        }

        #itemscontent {
            height: 100%;
            display: grid;
            /*Below line is added as inline style in A4 invoice component*/
            /*grid: "sno description hsn scale scale2 unit price unitprice";*/
            /*grid-template-rows: repeat(2, minmax(1rem, max-content)) auto repeat(2, minmax(1rem, max-content));*/
            /*grid-template-columns: minmax(min-content, max-content) minmax(min-content, auto) max-content max-content max-content max-content max-content max-content;*/
            grid-auto-rows: minmax(1rem, max-content);
            grid-column-gap: 1px;
            align-items: center;
        }

        #itemscontent>div {
            display: flex;
            align-items: center;
            border: 1px solid;
            height: 100%;
            border-top: 0;
            border-right: 0;
            padding: 0 0.25rem;
        }

        .border-left-0 {
            border-left: 0 !important;
        }

        .border-bottom-0 {
            border-bottom: 0 !important;
        }

        .border-top-1 {
            border-top: 1px solid black !important;
        }

        .span-2 {
            grid-column-start: span 2;
        }

        .span-3 {
            grid-column-start: span 3;
        }

        .span-4 {
            grid-column-start: span 4;
        }

        .span-5 {
            grid-column-start: span 5;
        }

        .span-7 {
            grid-column-start: span 7;
        }

        .text-darkgreen {
            color: darkgreen;
        }

        .text-red {
            color: red;
        }

        .bg-yellow {
            background-color: yellow;
        }

        .flex-end {
            justify-content: flex-end;
        }

        footer {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        #itemsfooter {
            text-transform: uppercase;
            border-left: 0 !important;
        }

        #itemsfooter>div {
            align-self: stretch;
            display: flex;
            align-items: center;
            padding: 0 0.5rem;
        }

        #amountinwords {
            flex: 75%;
        }

        #totalamount {
            flex: 25%;
            text-align: right;
            border-left: 1px solid black;
        }

        #totalamount ol {
            width: 100%;
        }

        #totalamount ol li:last-child {
            font-size: x-large;
        }

        #invoiceinformation {
            text-transform: none;
            border-left: 0 !important;
            display: grid !important;
            grid: "note" "bankdetails" "signature";
            grid-template-columns: minmax(min-content, 40%) minmax(min-content, 35%) minmax(min-content, 25%);
            padding: 0 0.5rem;
        }

        #invoiceinformation div {
            align-self: stretch;
            align-items: center;
            padding: 0 0.5rem;
        }

        /* #note {
            flex: 40%;
        } */

        #bankdetails {
            /* flex: 35%; */
            border: 1px solid;
            border-top: 0;
            border-bottom: 0;
        }

        #signature {
            display: flex;
            /* flex: 25%; */
            border-left: 0 !important;
            padding-right: 0.5rem !important;
        }

        #message {
            display: flex;
            justify-content: space-between;
            border-left: 0 !important;
            border-bottom: 0 !important;
            padding: 0 0.5rem !important;
        }
    </style>
    <style type="text/css">
        @media print {
            @page {
                size: A4;
            }
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>
                    <header>
                        <section id="brand">
                            <h1>BRAND</h1>
                            <h2>CAPTION</h2>
                            <h3>TAG LINE</h3>
                            <div>Address</div>
                            <div><b>TAX Invoice</b></div>
                            <section id="phone">
                                <ul>
                                    <li>Phone: </li>
                                    <li></li>
                                </ul>
                            </section>
                        </section>
                        <section id="invoicedetails">
                            <section id="customer-billed">
                                <ol>
                                    <li>Billed To</li>
                                    <li><b>ABC </b></li>
                                    <li>Mobile: </li>
                                    <li>Address: </li>
                                </ol>
                            </section>
                            <section id="customer-shipped">
                                <ol>
                                    <li>Shipped To</li>
                                    <li><b>ABC </b></li>
                                    <li>Mobile: </li>
                                    <li>Address: </li>
                                </ol>
                            </section>
                            <section id="invoice">
                                <ol>
                                    <li>Invoice Details</li>
                                    <li>Invoice No: <b>2/2024-25</b></li>
                                    <li>DC No: <b>2102</b></li>
                                    <li>Invoice Date: <b>01 Apr 2024</b></li>
                                    <li>Payment Mode: <b>Credit</b></li>
                                    <li>Payment Status: <b>Due</b></li>
                                </ol>
                            </section>
                        </section>
                    </header>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <main style="padding-bottom: 0">
                        <section id="invoiceitems">
                            <section id="itemscontent"
                                style="grid: sno description hsn scale  price unit unitprice; grid-template-columns: minmax(min-content, max-content) minmax(min-content, auto) max-content max-content  max-content max-content max-content; grid-template-rows: repeat(5, minmax(1rem, max-content)) auto repeat(3, minmax(1rem, max-content));">

                                <div class="border-left-0">S.No</div>

                                <div>Description</div>
                                <div><b></b></div>
                                <div>Days</div>
                                <div>Unit</div>

                                <div>Price</div>

                                <div>Unit Price</div>
                                <div id="invoiceinformation" class="span-7">
                                    <div id="note">
                                        <small>NOTE</small>
                                        <br>
                                        <text>Certified that the particulars
                                            given above are true and correct</text>
                                    </div>
                                    <div id="bankdetails">
                                        <small>COMPANY BANK DETAILS</small>
                                        <br>
                                        <text>BANK:
                                            ABC BANK, A/C. NO: 1111111111111111, IFSC: IABC0000000, Branch: DEF
                                            Road, GHI</text>
                                    </div>
                                    <div id="signature">
                                        <text><b>for ABC</b>
                                            <br>
                                            <br>
                                            <br>Authorized Signatory</text>
                                    </div>
                                </div>
                            </section>
                        </section>
                    </main>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

正常模式下： 一切看起来都不错。 enter image description here

在打印预览中或打印时： 打印时出现水平滚动条。我通过将 

Emulate CSS media type
设置为 
print
来检查这一点。

enter image description here

当我打印为 PDF 时，这会破坏布局

enter image description here

但是，当我删除嵌套网格中的内容时，我注意到一个奇怪的行为

#invoiceinformation
。我评论了
<text>
和
#note
内的
#bankdetails
节点，然后水平滚动条消失了。

评论后

Emulate CSS media type
到
Print
节点：
enter image description here
评论
<text>
节点后打印为PDF。
enter image description here
即使我在 
<text>
 节点中有数据，上面的输出也是预期的。所以我尝试将 
<text>
 设置为 
width:100%
 网格，但它不起作用。
请帮助我解决我所缺少的内容？

    





    
    html
    
    css
    
    
1个回答

    

      
      
      

        

          

            

              
0
投票

              
            

          

        

        
#invoiceinformation
，然后使用百分比或分数进行调整。
auto

    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.