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

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

0 голосов
/ 23 апреля 2020

См. Этот класс: 

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

}

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

Preview

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

Preview

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

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/

1 Ответ

1 голос
/ 23 апреля 2020

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

Похожие темы

...