I am having issues with printing to snappyPDF, my tabble is misplaced, and is printing in the center vertical of page as shown below. Also, some borders are missing.
and here is my blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hasil Lab PDF</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
<style>
thead {
display: table-header-group
}
tfoot {
display: table-row-group
}
tr {
page-break-inside: avoid
}
.header-caption {
border-top: 4px double #000;
border-bottom: 3px double #000;
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.page {
overflow: hidden;
page-break-after: always;
}
.title {
font-style: italic;
margin-top: 1.5em;
}
.content {
font-size: 1.5em;
font-weight: bold;
}
.identity {
margin-top: 3em;
}
.info {
font-weight: bold;
}
.divider {
width: 2px;
}
.content-title {
font-weight: bold;
white-space: nowrap;
}
.header-content {
margin-top: 2em;
margin-bottom: 1em;
}
#tooth {
border-collapse: collapse;
}
#tooth tr td {
padding: 1em;
}
.list-legend {
margin-top: 1em;
}
.legend {
list-style: none;
}
.legend li {
float: left;
margin-right: 10px;
}
.legend span {
border: 1px solid #ccc;
float: left;
width: 12px;
height: 12px;
margin: 2px;
}
.legend .karies {
background-color: red;
border: none;
}
.legend .missing {
background-color: yellow;
border: none;
}
.legend .radix {
background-color: green;
border: none;
}
.legend .tambalan {
background-color: blue;
border: none;
}
.legend .prothese {
background-color: purple;
border: none;
}
.legend .kalkulus {
background-color: darkcyan;
border: none;
}
.tooth-karies {
background-color: red;
color: white;
}
.tooth-missing {
background-color: yellow;
color: black;
}
.tooth-radix {
background-color: green;
color: white;
}
.tooth-tambalan {
background-color: blue;
color: white;
}
.tooth-prothese {
background-color: purple;
color: white;
}
.tooth-kalkulus {
background-color: darkcyan;
color: white;
}
</style>
</head>
<body>
@if (isset($mcu_hasil_labs))
<div class="page">
<h1 class="text-center header-caption">HASIL LABORATORIUM</h1> <br>
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center; white-space: nowrap;">Test /
Jenis Pemeriksaan</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">Satuan Konvensional</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">International System</th>
</tr>
<tr>
<th style="text-align: center; white-space: nowrap;">Hasil</th>
<th style="text-align: center; white-space: nowrap;">Nilai Rujukan</th>
<th style="text-align: center; white-space: nowrap;">Result</th>
<th style="text-align: center; white-space: nowrap;">Reference</th>
</tr>
</thead>
<tbody>
@foreach ($mcu_hasil_labs_nmgroups as $header1)
<tr>
<td>{{ $header1 }}</td>
</tr>
@foreach ($mcu_hasil_labs_nmtestawals as $header2)
@if ($header2['nmgroup']==$header1)
@if ($header2['nmtestawal']!=$header2['nmtest'])
<tr>
<td>{!! " " !!}
{{ $header2['nmtestawal'] }}
</td>
</tr>
@endif
@foreach ($mcu_hasil_labs_nmtests as $header3)
@if ($header3['nmtestawal']==$header2['nmtestawal'])
@if ($header3['nmtest']!=$header3['nmfraction'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{{ $header3['nmtest'] }}
</td>
</tr>
@endif
@foreach ($mcu_hasil_labs as $hasil_lab)
@if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{!! " " !!}
{{ $hasil_lab['nmfraction'] }}</td>
<td >{{ $hasil_lab['cHasil'] }}</td>
<td>{{ $hasil_lab['nilaistd'] }}</td><br>
</tr>
@endif
@endforeach
@endif
@endforeach
@endif
@endforeach
@endforeach
</tbody>
</table>
<div class="card-body">
<br><br><br><br>
<p class="text-left">{{ "Catatan:" }}</p>
<p class="text-center">{{ "Pemeriksa" }}</p>
</div>
</div>
@endif
</body>
</html>
I've tried to remove the head, but it is still printed in the middle of the page. Does anyone have any idea why there is a big gap between the header and the table? Also, how come some of my borders are missing?
i found error root cause which is in the tbody, here's working code
<body>
@if (isset($mcu_hasil_labs))
<div class="page">
<h1 class="text-center header-caption">HASIL LABORATORIUM</h1>
<br>
No.LAB : {{$mcu_hasil_labs[0]['nolab']}}
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center; white-space: nowrap;">Test /
Jenis Pemeriksaan</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">Satuan Konvensional</th>
<th colspan="2" style="text-align: center; white-space: nowrap;">International System</th>
</tr>
<tr>
<th style="text-align: center; white-space: nowrap;">Hasil</th>
<th style="text-align: center; white-space: nowrap;">Nilai Rujukan</th>
<th style="text-align: center; white-space: nowrap;">Result</th>
<th style="text-align: center; white-space: nowrap;">Reference</th>
</tr>
</thead>
<tbody>
@foreach ($mcu_hasil_labs_nmgroups as $header1)
<tr>
<td colspan="5">{{ $header1 }}</td>
</tr>
@foreach ($mcu_hasil_labs_nmtestawals as $header2)
@if ($header2['nmgroup']==$header1)
@if ($header2['nmtestawal']!=$header2['nmtest'])
<tr>
<td colspan="5">{!! " " !!}
{{ $header2['nmtestawal'] }}
</td>
</tr>
@endif
@foreach ($mcu_hasil_labs_nmtests as $header3)
@if ($header3['nmtestawal']==$header2['nmtestawal'])
@if ($header3['nmtest']!=$header3['nmfraction'])
<tr>
<td colspan="5">{!! " " !!}
{!! " " !!}
{{ $header3['nmtest'] }}
</td>
</tr>
@endif
@foreach ($mcu_hasil_labs as $hasil_lab)
@if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! " " !!}
{!! " " !!}
{!! " " !!}
{{ $hasil_lab['nmfraction'] }}</td>
<td>{{ $hasil_lab['cHasil'] }}</td>
<td>{{ $hasil_lab['nilaistd'] }}</td>
<td> </td>
<td> </td>
</tr>
@endif
@endforeach
@endif
@endforeach
@endif
@endforeach
@endforeach
</tbody>
</table>
<div class="card-body">
<br>
<hr>
<p class="text-left">{{ "Catatan:" }}</p>
<table>
<tr>
<td style="width: 700px;">
</td>
<td>
{{ "Pemeriksa," }}
</td>
</tr>
</table>
</div>
</div>
@endif
hope this helps others
cheers