Electron打印时表格内双边框Div跨页拆分问题求助

在Electron中实现表格打印功能时遇到以下问题：打印时表格内带双边框的div会在分页处被拆分，而单边框时分页正常。使用CutePDF模拟A4打印机测试，尝试过break-inside: avoid等分页控制方案但无效，需要实现双边框div完整分到下一页的效果。

现有HTML结构 #

<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>

现有CSS代码 #

.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;
    }
  }

解决方案 #

1. 调整分页控制的目标层级 #

当前break-inside仅作用于内层的.callNo和.barcode，但表格的分页行为需要从更高层级的元素控制。修改打印媒体查询的CSS：

@media print {
  /* 禁止表格行、单元格及卡片容器被分页拆分 */
  .tableFormat table tr,
  .tableFormat table td,
  .eachBookCallNo {
    break-inside: avoid !important;
    page-break-inside: avoid; /* 兼容旧版Chromium */
  }
  /* 移除原有针对内层div的break-after，避免强制分页 */
  .tableFormat table td div div{
    float:none;
    margin: 4px 0px 4px 0px;
  }
  button{
      display: none;
  }
}

2. 替换双边框实现方式 #

border: double + outline的组合可能导致浏览器计算元素高度时出现偏差，触发分页拆分。推荐两种替代方案：

方案A：用box-shadow模拟双边框

.tableFormat table td div div{
  border: 1px solid black;
  box-shadow: 0 0 0 2px black; /* 模拟外层边框 */
  /* 移除原有的border: double、outline、outline-offset */
}

方案B：嵌套div实现双边框

修改HTML结构，给.callNo和.barcode增加外层容器：

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

对应的CSS：

.callNo-wrapper, .barcode-wrapper {
  border: 1px solid black;
  padding: 2px; /* 控制双边框间距 */
  height: 100%;
  box-sizing: border-box;
}
.callNo, .barcode {
  border: 1px solid black;
  height: 100%;
  box-sizing: border-box;
  /* 保留原有其他样式 */
}
/* 移除原有的.tableFormat table td div div的border和outline样式 */

3. 修正元素高度计算 #

双边框会增加元素的实际占用高度，可适当调整单元格高度：

.tableFormat table td{
  height: 0.98in; /* 从0.95in微调增加 */
  width: 33%;
  border: none;
}

内容的提问来源于stack exchange，提问作者Steve