Look at 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've modified two styles. Disabling them allows the content to break correctly across pages. No "Duty Slip" is divided on different pages:
https://i.sstatic.net/844g8.png
If I enable the float and position styles and retry, the page break logic fails. When attempting to print in landscape orientation, the slips are placed side by side but still split at page breaks. In this example with more content, names have been censored:
https://i.sstatic.net/BecWa.png
So, how can I fill a page with these slips while preventing them from splitting over page breaks? Currently, the only way I can achieve it is by deactivating those styles and keeping to a single 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:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="SRRSchedule-Duty%20Slips1.css" rel="stylesheet" type="text/css" />
<title>Assignment Duties</title>
</head>
<body>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test1</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 9</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 16</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test2</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">test3</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
</table>
</div>
</body>
</html>
Fiddle: