Início / user-20023640

Steve's questions

Martin Hope
Steve
Asked: 2025-04-24 10:39:18 +0800 CST
  • 6

Esta é a estrutura HTML da tabela que estou imprimindo.

<body>
    <div class="tableFormat">
        <button onclick="window.print()">Print</button>
        <table>
            <tbody id="barcodeData">
                <tr>
                    <td>
                        <div class="eachBookCallNo">
                          <div class="callNo">
                              ၀၁၈၃၄၁ <br>
                                 -   <br>
                                 - 
                          </div>
                          <div class="barcode">
                             <img src="imagepath">၀၁၈၃၄၁</div>
                         </div>
                       </div>
                   </td>

                    <td>
                        <div class="eachBookCallNo">
                          <div class="callNo">
                               ၀၁၈၃၄၂ <br>
                                 -   <br>
                                 - 
                          </div>
                          <div class="barcode">
                             <img src="imagepath">၀၁၈၃၄၂</div>
                         </div>
                       </div>
                   </td>
  
                 </tr>

                 <!-- 12 rows -->
        </table>
    </div>

</body>

Este é o CSS para esse código


`.tableFormat table {
        border-spacing: 0.1in 0.1in;
        border-collapse: separate;
        border: none;
    }

.tableFormat table td{
        height: 0.95in;
        width: 33%;
        border: none;
    }
    
    .tableFormat table td div div{
        border: 1px double black;
        outline: 1px double black;
        outline-offset: 2px;
    }

    table td, table th {
        padding: 0; 
        margin: 0;
      }
    
    .eachBookCallNo{
        height: 100%;
        display: flex;
        box-sizing: border-box;
        cursor: pointer;
        gap: 0.05in;
    }

    .callNo{
        height: 100%;
        width: 40%;
        text-align: center;
        display: flex; 
        justify-content: center;
        align-items: center; 
        line-height: 25px;
        font-weight: bold;
        box-sizing: border-box;

    }

    .barcode{
        width: 60%; 
        height: 100%;
        display: flex; 
        justify-content: center;
        align-items: center; 
        flex-direction: column;
    }
    
    .barcode img{
        width: 98%;
        height: 60%;
        margin-right: 1px;
    }

    .barcode:nth-child(2){
        letter-spacing: 2.5cap;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

@page {
      size: A4;
      margin: 0.75in 0.40in 0.75in 0.40in;
  }

  @media print {
    body {
      size: A4;
      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      background: #fff;
      margin: 0;
    }

    .tableFormat table td div div{
        float:none;
        break-inside: avoid !important;
        break-after: always;
        margin: 4px 0px 4px 0px;
    }
    
    button{
        display: none;
    }
  }
`

Imprimir como captura de tela em PDF

Como anexei uma imagem, a primeira parte da borda dupla é dividida antes da quebra de página. Antes das bordas duplas, tentei com borda única e a quebra de página funciona.

Não tenho uma impressora física, então usei o CutePDF Write para simular uma impressora A4. Procurei soluções como esta (Evitar quebra de página dentro da linha da tabela) , mas não funcionou bem para mim. Preciso separar completamente a borda dupla em outra página.

javascript