This is my HTML structure of table I am printing out.
<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>
This is the CSS for that code
`.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;
}
}
`
As I have attached an image, the first part of the double border is split before page break. Before the double borders, I have tried with single border and the page break works.
I do not have a physical printer so I used CutePDF Write to simulate as A4 printer. I searched for solutions like this (Avoid Page Break inside Row of table) but it does not work well with me. I need to completely separate the double border into another page.
Problem:
When printing a table with complex nested structures (like divs with double borders inside table cells), some boxes get split across pages. This happens especially with double borders or outline styles inside flexboxes or nested divs.
Solution:
Use display: inline-block and break-inside: avoid on the correct container (.eachBookCallNo) and avoid nesting double borders too deeply.
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>