laravel 文本重叠 _大数据知识库

问题是-〉Problem
我试着把这段文本放到table下面，但是它在table上重叠了，我不能把它放到底部，我想这是因为它在条件下生成了<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  Illuminate\Support\Facades\URL::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  Illuminate\Support\Facades\URL::to('/') . '/' ?>images/fol.jpg" alt="">
    </div>

</body>

</html>
有办法吗？
laravel 文本重叠

1条答案

相关问题

热门标签

最新问答
