Dompdf 无法正确排列 html 元素答案

【问题标题】：Dompdf cannot arrange html elements properlyDompdf 无法正确排列 html 元素
【发布时间】：2021-09-03 20:55:12
【问题描述】：

嘿，伙计们，我在 laravel 中使用 Dompdf，我的 dompdf 视图上只有一个 h2 和一个表格，从中生成 pdf，所以当我生成 pdf 时，这里的 h2 和表格元素类型的合并是实际的问题。

这是我的代码 ->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Records</title>

</head>

<body>


    <style>
        .pdfContainer {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;

        }



        table {
            width: 70%;
            text-align: center;
            margin-right: auto;
            margin-left: auto;
            float: bottom;
            border: none;

        }

        td {
            text-align: center;
            font-size: 0.95em;
            color: #252a34;
            font-weight: 500;
            background-color: #fff;
            white-space: nowrap;
        }


        th,
        td {
            padding: 15px;
            border: 1px solid #252a34 !important;
            border-collapse: collapse;
            border-spacing: 0;
        }

        th {
            text-align: center;
            font-size: 0.95em;
            font-weight: 800;
            border: none;
            white-space: nowrap;

        }




        .attdStatusTdpresent {
            color: #18a14f;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-weight: 600;
            font-size: 0.95em;
            font-family: "Merriweather Sans", sans-serif;
        }

        .attdStatusTdabsent {
            color: #b82348;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-weight: 600;
            font-size: 0.95em;
            font-family: "Merriweather Sans", sans-serif;
        }


        .attdStatusTdlate {
            color: #ff2e63;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }

        .attBehaviourExcellent {
            color: #289672;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }

        .attBehaviourGood {
            color: #00bfa6;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }

        .attBehaviourAverage {
            color: #ffc947;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }

        .attBehaviourBad {
            color: #ff2e63;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }



        .attProgressExcellent {
            color: #289672;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }

        .attProgressGood {
            color: #00bfa6;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }

        .attProgressNeed {
            color: #ffc947;
            padding: 8px;
            width: 140px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
            white-space: nowrap;
        }

        .attProgressprogressive {
            color: #185adb;
            padding: 8px;
            width: 110px;
            border-radius: 40px;
            margin: auto;
            text-transform: capitalize;
            font-size: 0.95em;
        }



        .pdfContainer {
            width: 100%;
            min-height: 100vh;
            display: flex;
            align-items: flex-start;
            box-sizing: border-box;
        }
    </style>
    <div class="pdfContainer">
        <table>
            <h2 style='margin:auto;'>{{$studentName}}</h2>
            <tr>
                <th> PRÉSENCE </th>
                <th> COMPORTEMENT </th>
                <th> PROGRES </th>
                <th> DATE DE L’ATELIER </th>
            </tr>
            @foreach($records as $record)
            <tr>
                <td>
                    <p class="attdStatusTd{{$record['att_status']}}"> {{$record['att_status']}} </p>
                </td>
                <td>
                    <p class="attBehaviour{{$record['behaviour']}}"> {{$record['behaviour']}} </p>
                </td>
                <td>
                    <p class="attProgress{{$record['progress']}}"> {{$record['progress']}} </p>
                </td>
                <td>
                    <p> {{$record['customDate']}} </p>
                </td>
            </tr>
            @endforeach
        </table>
    </div>
</body>
</html>

而在服务器上我只是使用$pdf = App::make('dompdf.wrapper'); $pdf->loadView('recordsPdf', compact('records', 'studentName'));

生成pdf。

谁有解决办法？

【问题讨论】：

显示一些代码，以便有人可以帮助您解决问题
如何编辑我的问题？
点击问题底部的编辑按钮
您是否使用引导程序，如果是，您可以提及版本

标签： javascript php laravel pdf dompdf

【解决方案1】：

想知道您是否可以尝试将潜水移出表格标签，然后根据您想要的 css 进行调整。

<style>
 .text-center {
        text-align: center;
    }
 </style>
<div class="pdfContainer">
    <div class="text-center">
     {{$studentName}}
    </div>
    <table>
        <h2 style='margin:auto;'>{{$studentName}}</h2>
        <tr>
            <th> PRÉSENCE </th>
            <th> COMPORTEMENT </th>
            <th> PROGRES </th>
            <th> DATE DE L’ATELIER </th>
        </tr>
        @foreach($records as $record)
        <tr>
            <td>
                <p class="attdStatusTd{{$record['att_status']}}"> 
                {{$record['att_status']}} </p>
            </td>
            <td>
                <p class="attBehaviour{{$record['behaviour']}}"> {{$record['behaviour']}} </p>
            </td>
            <td>
                <p class="attProgress{{$record['progress']}}"> 
                {{$record['progress']}} </p>
            </td>
            <td>
                <p> {{$record['customDate']}} </p>
            </td>
        </tr>
        @endforeach
    </table>
</div>

dompdf 适用于 html、css。不需要其他引导程序或模板。

【讨论】：