Блог

Главная - Вопросы по программированию - Наложение текста Dompdf laravel

Наложение текста Dompdf laravel

#php #laravel #pdf #pdf-generation #dompdf

Вопрос:

Вот в чем проблема -> >Проблема

Я пытаюсь поместить этот фрагмент текста под стол, но он перекрывается на столе. И я не могу докопаться до сути. Я думаю, это потому, что при условии, что он делает <tr> , и из-за этого текстовая часть отображается до завершения цикла.

И вот мой код ->

 <!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: 100%;
            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%;
            display: flex;
            align-items: flex-start;
            box-sizing: border-box;
        }

        .logo>img {
            width: 100%;
            min-height: 30px;
        }

        .nameContainer {
            width: 100%;
            text-align: center;
        }


       
    </style>


    <div class="logo">
        <img src="<?php echo  IlluminateSupportFacadesURL::to('/') . '/' ?>images/l.jpg" alt="">
    </div>




    <div class="nameContainer">

        <h2> {{$studentName}} </h2>

    </div>

    <div class="pdfContainer">



        <table>

            <tr>

                <th> PRÉSENCE </th>
                <th> COMPORTEMENT </th>
                <th> PROGRES </th>
                <th> DATE DE L’ATELIER </th>

            </tr>


            @foreach($records as $record)

            <tr>

                <td>
data

                </td>
                <td>


data


                </td>
                <td>

data


                </td>
                <td>
                    <p> {{$record['customDate']}} </p>
                </td>

            </tr>

            @endforeach

        </table>



    </div>




    <div class="termContainer">
        <strong> Term Report: </strong>
        <p>{{ !empty($termReport->text) ? $termReport->text: '' }} </p>
    </div>

    <div class="footerImage">
        <img src="<?php echo  IlluminateSupportFacadesURL::to('/') . '/' ?>images/fol.jpg" alt="">
    </div>


</body>

</html>

Есть какое-нибудь решение?

Метки: