#laravel #html-table #laravel-blade #bootstrap-table
#laravel #html-таблица #laravel-blade #начальная загрузка-таблица
Вопрос:
У меня возникли проблемы с печатью в snappyPDF, моя таблица неуместна и печатается по центральной вертикали страницы, как показано ниже. Кроме того, некоторые границы отсутствуют.
введите описание изображения здесь
а вот и мой клинок
<!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>{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{{ $header2['nmtestawal'] }}
</td>
</tr>
@endif
@foreach ($mcu_hasil_labs_nmtests as $header3)
@if ($header3['nmtestawal']==$header2['nmtestawal'])
@if ($header3['nmtest']!=$header3['nmfraction'])
<tr>
<td>{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{{ $header3['nmtest'] }}
</td>
</tr>
@endif
@foreach ($mcu_hasil_labs as $hasil_lab)
@if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{{ $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>
Я пытался удалить заголовок, но он по-прежнему напечатан в середине страницы.
У кого-нибудь есть какие-нибудь идеи, почему существует большой разрыв между заголовком и таблицей? Кроме того, почему некоторые из моих границ отсутствуют?
Комментарии:
1. как выглядит ваш блейд в браузере?
2. выглядит так, как показано на моем изображении
3. в моем браузере у него нет пробела
4. я использую Firefox и Chrome, у всех есть пробел
Ответ №1:
я нашел первопричину ошибки, которая находится в tbody, вот рабочий код
<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">{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{{ $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">{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{{ $header3['nmtest'] }}
</td>
</tr>
@endif
@foreach ($mcu_hasil_labs as $hasil_lab)
@if ($hasil_lab['nmtest']==$header3['nmtest'])
<tr>
<td>{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{!! "amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;" !!}
{{ $hasil_lab['nmfraction'] }}</td>
<td>{{ $hasil_lab['cHasil'] }}</td>
<td>{{ $hasil_lab['nilaistd'] }}</td>
<td>amp;nbsp;</td>
<td>amp;nbsp;</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;">
amp;nbsp;
</td>
<td>
{{ "Pemeriksa," }}
</td>
</tr>
</table>
</div>
</div>
@endif
надеюсь, это поможет другим
приветствия