laravel blade bootstrap table snappyPDF格式

Question

我在打印到 snappyPDF 时遇到问题，我的制表符放错了位置，打印在页面的垂直中心，如下所示。此外，一些边框缺失。

enter image description here

这是我的 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>{!! "&nbsp;&nbsp;&nbsp;&nbsp;&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>{!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                                                    {!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                                                    {{ $header3['nmtest'] }}
                                                </td>
                                            </tr>
                                        @endif
                                        @foreach ($mcu_hasil_labs as $hasil_lab)
                                            @if ($hasil_lab['nmtest']==$header3['nmtest'])
                                                <tr>
                                                    <td>{!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                                                        {!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                                                        {!! "&nbsp;&nbsp;&nbsp;&nbsp;&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>

我试过去掉头部，但它仍然打印在页面中间。有谁知道为什么 header 和 table 之间有这么大的差距？另外，我的一些边框怎么不见了？

Answer 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">{!! "&nbsp;&nbsp;&nbsp;&nbsp;&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">{!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                    {!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                    {{ $header3['nmtest'] }}
                </td>
            </tr>
            @endif
            @foreach ($mcu_hasil_labs as $hasil_lab)
            @if ($hasil_lab['nmtest']==$header3['nmtest'])
            <tr>
                <td>{!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                    {!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                    {!! "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" !!}
                    {{ $hasil_lab['nmfraction'] }}</td>
                <td>{{ $hasil_lab['cHasil'] }}</td>
                <td>{{ $hasil_lab['nilaistd'] }}</td>
                <td>&nbsp;</td>
                <td>&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;">
                    &nbsp;
                </td>
                <td>
                    {{ "Pemeriksa," }}
                </td>
            </tr>
        </table>
    </div>
</div>
@endif

希望这对其他人有帮助

干杯

laravel blade bootstrap table snappyPDF格式

laravel blade bootstrap table format in snappyPDF

html-table

laravel

bootstrap-table

laravel-blade