CSS - не удалось разделить двойной график DIV внутри таблицы во время печати в Electron JS ⇐ Javascript

[Anonymous]

Это моя HTML -структура таблицы, которую я печатаю. < /p>


Print






၀၁၈၃၄၁

-

-


၀၁၈၃၄၁







၀၁၈၃၄၂

-

-


၀၁၈၃၄၂











< /code>
Это CSS для этого кода < /p>

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

< /code>
print As PDF -скриншот < /p>
Когда я прикрепил изображение, первая часть двойной границы разделена перед разрывом страницы. Перед двойными границами я попробовал с одной границей и разрывами страницы. Я искал подобные решения (избегайте разрыва страниц в строке таблицы), но это не очень хорошо работает со мной. Мне нужно полностью разделить двойную границу на другую страницу.

Подробнее здесь: https://stackoverflow.com/questions/795 ... printing-i