See this class:
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
I have commented out two styles. Commenting them out causing the content to page-break correct. No "Duty Slip" is split across a page:
Now, if I introduce the float and position styles and try again the page break logic fails. If I try to print landscape then I get slips side by side but they still split on page breaks. This example is with a lot more content and I have blocked out the names:
So how can I fill the page with these slips and prevent splitting over page breaks? At the moment the only way I can do it is by commenting out those styles and limiting to one column of duty slips.
CSS:
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 12pt;
text-align: left;
color: #000000;
background-color: #ffffff;
}
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
.textTitle {
font-size: 14pt;
font-weight: 700;
}
.textName {
font-size: 12pt;
}
.tableDutySlip {
width: 100%;
border:1px black solid;
border-collapse:collapse;
}
.tableDutySlip td {
border:1px black solid;
}
.cellHeading {
font-weight: 700;
background-color: #808080;
}
.cellDate {
}
.cellAssignments {
}
.columnDate {
width: 25%;
}
.columnAssignments {
width: 75%;
}
@media screen
{
br { display: none; }
}
HTML:
Assignment Duties
Assignment Duties
Test1
Date
Assignments
Thu, Apr 9
Mic Left, Mic Right
Sun, Apr 12
Watchtower Reader
Thu, Apr 16
Mic Left, Mic Right
Assignment Duties
Test2
Date
Assignments
Sun, Apr 12
Mic Left, Mic Right
Sun, Apr 19
Mic Left, Mic Right
Assignment Duties
test3
Date
Assignments
Sun, Apr 19
Watchtower Reader
Fiddle:

