看到这个类:
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
我已经注释掉了两种样式。将它们注释掉会导致内容正确分页。没有“关税单”在页面上分开:
现在,如果我引入float
andposition
样式并再次尝试分页逻辑失败。如果我尝试打印横向,那么我会并排得到单张,但它们仍然会在分页符处分开。此示例包含更多内容,并且我已经屏蔽了名称:
那么我怎样才能用这些单据填满页面并防止分页符分开呢?目前,我能做到的唯一方法是注释掉这些样式并限制为一列值班单。
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>
小提琴: