Есть html страница с 4 чеками, в браузере получилось вроде неплохо (2 сверху и 2 снизу), но когда я пытаюсь распечатать такую страницу (предполагалось что распечатается на одном листе A4 4 чека) получается такое:
Вопрос: Как мне правильно расположить мои чеки в html, чтобы их можно было распечатать одним A4? Мой html код:
<style type="text/css">
<!--
span.customer{white-space: pre;font-family:Impact;font-size:30.0px;color:Black;font-weight:bold;font-style:normal;text-decoration: none}
div.customer{font-family:Impact;font-size:30.0px;color:Black;font-weight:bold;font-style:normal;text-decoration: none}
-->
</style>
<table>
<tr>
<td>
<img src="background.png">
<div style="transform:rotate(90deg)">
<div style="position:absolute;left:-168px;top:-49px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top:-18px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 13px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 44px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 75px" class="customer"><span class="customer">Some Text</span></div>
</div>
</td>
<td>
<img src="background.png">
<div style="transform:rotate(90deg)">
<div style="position:absolute;left:-168px;top:-49px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top:-18px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 13px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 44px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 75px" class="customer"><span class="customer">Some Text</span></div>
</div>
</td>
</tr>
<tr>
<td>
<img src="background.png">
<div style="transform:rotate(90deg)">
<div style="position:absolute;left:-168px;top:-49px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top:-18px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 13px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 44px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 75px" class="customer"><span class="customer">Some Text</span></div>
</div>
</td>
<td>
<img src="background.png">
<div style="transform:rotate(90deg)">
<div style="position:absolute;left:-168px;top:-49px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top:-18px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 13px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 44px" class="customer"><span class="customer">Some Text</span></div>
<div style="position:absolute;left:-168px;top: 75px" class="customer"><span class="customer">Some Text</span></div>
</div>
</td>
</tr>
</table>
</div>
@media print{ html, body { width: fit-content; height: fit-content; margin: 0; padding: 0; } }
. По результатам отпишитесь. – Total Pusher 18 мар '19 в 5:12