Я пытаюсь собрать некоторые HTML и CSS, что при печати документа в Chrome:
- Отображение фиксированного верхнего и нижнего колонтитула на каждой странице
- Показать 2 столбца информации. В идеале эти столбцы будут перемещаться слева направо, прежде чем перейти на следующую страницу.
Я попытался адаптировать это хорошее руководство , в котором используются фиксированные верхние и нижние колонтитулы с проставками в thead и tfoot. Ниже приведен мой фрагмент кода, близкий к тому, что я хочу (нажмите кнопку ПЕЧАТЬ МЕНЯ, чтобы увидеть макет печати):
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid rgb(22, 7, 7); /* for demo */
}
.two-column {
column-count: 2;
}
h2 {
margin: 0
}
table {
width: 100%
}
.content {
width: 100%;
height: 75px;
border: 1px solid blue;
break-inside: avoid;
display: flex;
align-items: center;
justify-content: center;
}
@page {
margin: 20mm;
size: 'A4';
}
@media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<html>
<head>
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='two-column'>
<div class='content'>1</div>
<div class='content'>2</div>
<div class='content'>3</div>
<div class='content'>4</div>
<div class='content'>5</div>
<div class='content'>6</div>
<div class='content'>7</div>
<div class='content'>8</div>
<div class='content'>9</div>
<div class='content'>10</div>
<div class='content'>11</div>
<div class='content'>12</div>
<div class='content'>13</div>
<div class='content'>14</div>
<div class='content'>15</div>
<div class='content'>16</div>
<div class='content'>17</div>
<div class='content'>18</div>
<div class='content'>19</div>
<div class='content'>20</div>
<div class='content'>21</div>
<div class='content'>22</div>
<div class='content'>23</div>
<div class='content'>24</div>
<div class='content'>25</div>
<div class='content'>26</div>
<div class='content'>27</div>
<div class='content'>28</div>
<div class='content'>29</div>
<div class='content'>30</div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
<div class='content'></div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Проблема заключается в том, что когда в предварительном просмотре печати разрывается первый столбец, в верхней части второго столбца появляется дополнительное пространство размером 100 пикселей. Я подозреваю, что это потому, что thead как-то «повторяется» на разрыве столбца, а также на разрыве страницы:
Есть ли способ избежать этого?
Меня также волнует только достижение этого в последнем браузере Chrome.
Спасибо.