Проблема печати HTML div и разрыва страницы при использовании стилей float/position

Смотрите этот класс:

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

}

Я прокомментировал два стиля. Их комментирование приводит к правильному разрыву страницы. Никакой «дежурный лист» не разбит на страницу:

Предварительный просмотр

Теперь, если я введу стили float и position и повторю попытку, логика разрыва страницы не сработает. Если я пытаюсь напечатать альбомную ориентацию, я получаю листы рядом, но они все равно разделяются на разрывы страниц. В этом примере гораздо больше контента, и я заблокировал имена:

Предварительный просмотр

Итак, как я могу заполнить страницу этими промахами и предотвратить разбиение на разрывы страниц? На данный момент единственный способ сделать это — закомментировать эти стили и ограничиться одной колонкой должностных инструкций.

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/


html css page-break-inside
person Andrew Truckle    schedule 23.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В случае, если вы хотите, чтобы все должностные инструкции находились на одной странице, вы можете создать раздел-оболочку для всех должностных инструкций и добавить к нему гибкий стиль отображения. 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>

person vishnu sandhireddy    schedule 23.04.2020
comment
Спасибо. Мне также пришлось использовать flex-wrap: wrap;, потому что, если мне нужно было много, они просто втиснулись на одну страницу. Но у меня все еще есть проблема с загадкой разрыва страницы. - person Andrew Truckle; 24.04.2020