Код: Выделить всё
.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; }
}
Код: Выделить всё
Assignment Duties
Assignment Duties
Test1
Date
Assignments
Thu, Apr 9
Mic Left, Mic Right
Sun, Apr 12
Watchtower Reader
Thu, Apr 16
Mic Left, Mic Right
Assignment Duties
Test2
Date
Assignments
Sun, Apr 12
Mic Left, Mic Right
Sun, Apr 19
Mic Left, Mic Right
Assignment Duties
test3
Date
Assignments
Sun, Apr 19
Watchtower Reader
https://jsfiddle.net/e3kradLh/
Подробнее здесь: https://stackoverflow.com/questions/613 ... ion-styles
Мобильная версия