Início / coding / Perguntas / 79589739
Accepted
Steve
Asked: 2025-04-24 10:39:18 +0800 CST

CSS - Falha ao separar os divs de borda dupla dentro da tabela durante a impressão no Electron JS

  • 772

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

1 respostas

  1. Best Answer

    Problema:

    Ao imprimir uma tabela com estruturas aninhadas complexas (como divs com bordas duplas dentro de células da tabela), algumas caixas são divididas entre as páginas. Isso acontece especialmente com bordas duplas ou estilos de contorno dentro de flexboxes ou divs aninhadas.

    Solução:

    Use display: inline-block e break-inside: avoid no contêiner correto (.eachBookCallNo) e evite aninhar bordas duplas muito profundamente.

    body {
  font-family: Arial, sans-serif;
}

.tableFormat {
  width: 100%;
}

button {
  margin: 10px;
}

.tableFormat table {
  width: 100%;
  border-spacing: 0.1in 0.1in;
  border-collapse: separate;
  border: none;
}

.tableFormat table td {
  width: 33%;
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: none;
}

.eachBookCallNo {
  display: inline-block;
  width: 100%;
  height: 0.95in;
  box-sizing: border-box;
  page-break-inside: avoid;
  break-inside: avoid;
  border: 1px double black;
  outline: 1px double black;
  outline-offset: 2px;
  padding: 4px;
  display: flex;
  gap: 0.05in;
  cursor: pointer;
}

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

.barcode {
  width: 60%;
  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;
}

@media print {
  body {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    background: #fff;
    margin: 0;
  }

  button {
    display: none;
  }

  .eachBookCallNo {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    break-after: auto;
  }

  tr {
    page-break-inside: avoid;
  }

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

    <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" alt="barcode">
                ၀၁၈၃၄၁
              </div>
            </div>
          </td>
          <td>
            <div class="eachBookCallNo">
              <div class="callNo">
                ၀၁၈၃၄၂ <br> - <br> -
              </div>
              <div class="barcode">
                <img src="imagepath" alt="barcode">
                ၀၁၈၃၄၂
              </div>
            </div>
          </td>
          <td>
            <div class="eachBookCallNo">
              <div class="callNo">
                ၀၁၈၃၄၃ <br> - <br> -
              </div>
              <div class="barcode">
                <img src="imagepath" alt="barcode">
                ၀၁၈၃၄၃
              </div>
            </div>
          </td>
        </tr>
        <!-- Add more rows like above -->
      </tbody>
    </table>
  </div>
</body>
    • 0

relate perguntas