0

看到这个类:

.divDutySlip {
    width: 90mm;
    min-height: 120mm; 
    padding: 2mm;
    /*float:left;
    position: relative; */
    margin: 2mm;
    border: 1px solid #000000;
    page-break-inside: avoid;

}

我已经注释掉了两种样式。将它们注释掉会导致内容正确分页。没有“关税单”在页面上分开:

预习

现在,如果我引入floatandposition样式并再次尝试分页逻辑失败。如果我尝试打印横向,那么我会并排得到单张,但它们仍然会在分页符处分开。此示例包含更多内容,并且我已经屏蔽了名称:

预习

那么我怎样才能用这些单据填满页面并防止分页符分开呢?目前,我能做到的唯一方法是注释掉这些样式并限制为一列值班单。

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>

小提琴:

https://jsfiddle.net/e3kradLh/

4

1 回答 1

1

如果您想在一个页面中包含所有的 dutyslip,您可以为所有 dutyslips 创建一个包装 div 并为其添加 display flex 样式。 https://jsfiddle.net/jhbktoya/1/

body {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 12pt;
  text-align: left;
  color: #000000;
  background-color: #ffffff;
}

.wrapper {
  display: flex;
}

.divDutySlip {
  width: 90mm;
  min-height: 120mm;
  padding: 2mm;
  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;
  }
}
<div class='wrapper'>
  <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>
      <tbody>
        <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>
      </tbody>
    </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>
      <tbody>
        <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>
      </tbody>
    </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>
      <tbody>
        <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>
      </tbody>
    </table>
  </div>

</div>

于 2020-04-23T18:08:16.253 回答