Я пытаюсь напечатать несколько динамически генерируемых таблиц на каждой странице. Существует контейнер class="tabulation"
, который содержит все таблицы. Также ставится .page -break
после каждого стола.
Но проблемы заключаются в следующем:
- Если я использую position: absolute
в классе .tabulation
, .page-break
не работает.
- Если я удаляю absolute , содержимое перемещается вправо, а не в центр.
- Я пытался поместить контейнер .tabulation
в контейнер position: relative
. Но он перекрывал все таблицы на первой странице.
Я использую Materialise CSS в своем проекте.
Версия браузера 68.0.3440.106 (Официальная сборка) (64-разрядная версия)
ОС Windows 10
CSS
@media print{
body *{visibility:hidden}
article .tabulation *{visibility:visible}
article .tabulation{
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%
}
.page-break{page-break-after:always;visibility:visible}
}
@page{
size: auto;
margin: 50px auto 0;
}
HTML
<div class="tabulation"> <!-- Main container -->
<!-- Page 1 contents -->
<div class="row">
<div class="col s12">
<div class="clearfix">
<img src="logo.jpg">
<div class="right right-align">
<h1 class="big-5 mb-0">tITLE</h1>
<p>Some text</p>
</div>
</div>
</div>
<div class="col s7">
<p class="px-30">Some text</p>
</div>
<div class="col s5 mb-30" style="font-size:1rem">
<p class="px-30">Some text</p>
</div>
<div class="col s12">
<table class="table striped">
</table>
</div>
</div>
<div class="page-break"></div> <!-- Page break -->
<!-- Page 2 contents -->
<div class="row">
<div class="col s12">
<div class="clearfix">
<img src="logo.jpg">
<div class="right right-align">
<h1 class="big-5 mb-0">tITLE</h1>
<p>Some text</p>
</div>
</div>
</div>
<div class="col s7">
<p class="px-30">Some text</p>
</div>
<div class="col s5 mb-30" style="font-size:1rem">
<p class="px-30">Some text</p>
</div>
<div class="col s12">
<table class="table striped">
</table>
</div>
</div>
<div class="page-break"></div> <!-- Page break -->
<!-- Page 3 contents -->
<div class="row">
<div class="col s12">
<div class="clearfix">
<img src="logo.jpg">
<div class="right right-align">
<h1 class="big-5 mb-0">tITLE</h1>
<p>Some text</p>
</div>
</div>
</div>
<div class="col s7">
<p class="px-30">Some text</p>
</div>
<div class="col s5 mb-30" style="font-size:1rem">
<p class="px-30">Some text</p>
</div>
<div class="col s12">
<table class="table striped">
</table>
</div>
</div>
<div class="page-break"></div> <!-- Page break -->
</div>
Заранее спасибо.