Это проблемное изображение
Экран просмотра
Экран печати
Почему экран отличается, я хочу все Экран такой же, я ищу учебник и не работаю со мной
Я создаю его для своего отчета Счет-фактура
Это код просмотра всего на одной странице
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kwitansi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color:#333;
font-size:12pt;
}
.container{
margin:0 auto;
width:21cm;
height:11cm;
background-size: 8cm;
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
background-image: url({{ asset('appy/images/logo2.png')}});
}
table{
width: 20cm;
height: 10cm;
border-collapse:collapse;
}
table th, table td{
width: 5cm;
border-style: none !important;
}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 1em;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 1em;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-pstd{font-family:Tahoma, Geneva, sans-serif !important;border-color:#000000;text-align:left;vertical-align:top}
.tg .tg-i09r{font-family:Tahoma, Geneva, sans-serif !important;border-color:#000000;text-align:left;vertical-align:middle}
.tg .tg-rk7a{font-size:16px;font-family:Tahoma, Geneva, sans-serif !important;text-align:left;vertical-align:middle}
.tg .tg-rm9j{font-size:12px;font-family:Tahoma, Geneva, sans-serif !important;border-color:#000000;text-align:right;vertical-align:middle}
.tg-pstd2{text-transform: uppercase;font-family:"Comic Sans MS", cursive, sans-serif !important;background-color: #e6e6e6;-webkit-transform: skew(-20deg);-moz-transform: skew(-20deg);-o-transform: skew(-20deg);transform: skew(-20deg);}
.tg-pstd2_1{font-size:20px;width:7cm;height:1cm;margin:0 auto;text-align:center;text-transform:uppercase;font-family:"Comic Sans MS", cursive, sans-serif !important;background-color: #e6e6e6;-webkit-transform: skew(-20deg);-moz-transform: skew(-20deg);-o-transform: skew(-20deg);transform: skew(-20deg);padding:1px 1px !important;}
.tg-pstd2_2{text-align: center}
</style>
</head>
<body>
<div class="container">
<table class="tg" id="print">
<tr>
<th class="tg-rk7a" colspan="3">Invoice #{{ $kwitansi->id }}</th>
<th class="tg-rm9j"><img height="25cm" src="{{ asset('appy/images/PIKSI.jpg') }}" alt=""></th>
</tr>
<tr>
<td class="tg-i09r"><u>Received From</u> <br> Telah Diterima Dari</td>
<td class="tg-i09r" colspan="3">{{ $kwitansi->received }} <br> ..........................................................................................................................</td>
</tr>
<tr>
<td class="tg-i09r"><u>Received From</u> <br> Telah Diterima Dari</td>
<td class="tg-i09r" colspan="3">{{ "Rp. ". format_uang($kwitansi->registration) }} <br> ..........................................................................................................................</td>
</tr>
<tr>
<td class="tg-i09r"><u>Received From</u> <br> Telah Diterima Dari</td>
<td class="tg-i09r" colspan="3">{{ "Rp. ". format_uang($kwitansi->course) }} <br> ..........................................................................................................................</td>
</tr>
<tr>
<td class="tg-i09r"><u>Received From</u> <br> Telah Diterima Dari</td>
<td class="tg-i09r" colspan="3">{{ "Rp. ". format_uang($kwitansi->trasnportation) }} <br> ..........................................................................................................................</td>
</tr>
<tr>
<td class="tg-pstd"><u>Received From</u> <br> Telah Diterima Dari</td>
<td class="tg-pstd2" colspan="3"><b>{{ terbilang($kwitansi->sum_rp) }}</b> <br> .....................................................................................................................................................</td>
</tr>
<tr>
<td class="tg-pstd"><u>Received From</u> <br> Telah Diterima Dari</td>
<td class="tg-pstd" colspan="3"><b>{{ $kwitansi->payment }}</b> <br> ..........................................................................................................................</td>
</tr>
<tr>
<td class="tg-pstd" colspan="2"><div class="tg-pstd2_1"><b>{{ "Rp. ". format_uang($kwitansi->sum_rp) }}</b></div></td>
<td class="tg-pstd2_2">
</td>
<td class="tg-pstd2_2">
<div>
<p>
Bandung, {{ $kwitansi->register_at }} <br>
Penerima <br><br><br><br>
{{ $kwitansi->received }}
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Я использую одну страницу для этого css и js на одной странице
В чем моя ошибка
Может помочь мне, пожалуйста
Спасибо за помощь