laravel - dompdf 表格单元格溢出表外

问题描述

我正在使用 dompdf 生成 PDF，其中一个表格单元格溢出页面边缘。我找不到任何原因，因为当显示为常规 HTML 页面时，这不会发生。可能有什么潜在的解决方法可以使细胞留在细胞内？

代码（包含 Laravel 刀片语法）：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
        footer {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

        body {
            font-family: 'Josefin Sans', sans-serif;
            font-size: 13px;
            width: 100%;
        }

        .font-bold {
            font-weight: bold;
        }

        .font-upper {
            text-transform: uppercase;
        }

        .info-table-helper {
            text-transform: uppercase;
            font-weight: bold;
            margin-right: 10px;
            font-size: 12px;
            width: 150px;
        }

        .alert {
            padding: 20px;
            background-color: #C55696;
            color: white;
            margin-bottom: 15px;
        }

        /* main table */
        .main-table {
            border-collapse: collapse;
            border: 1px solid #000;
            table-layout: fixed;
            width: 100%;
        }

        .main-table th {
            height: 40px;
        }

        .main-table td {
            padding: 10px;
        }

        .main-table tbody {
            font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        }

        .main-table tbody tr:nth-child(even) {
            background-color: #f5f5f5;
        }

        .main-table thead {
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<table style="width: 100%; margin-bottom: 20px">
    <tr>
        <td style="width: 50%">
            <h1 class="font-upper">Banner Request</h1>
            <p class="font-bold font-upper">** For internal use only **</p>
        </td>
        <td style="width: 50%">
            <table class="info-table">
                <tr>
                    <td class="info-table-helper">Client</td>
                    <td>{{ $projectRevision->project->client->name }}</td>
                </tr>
                <tr>
                    <td class="info-table-helper">Job code</td>
                    <td>{{ $projectRevision->project->job_code }}</td>
                </tr>
                <tr>
                    <td class="info-table-helper">Project name</td>
                    <td>{{ $projectRevision->project->name }}</td>
                </tr>
                <tr>
                    <td class="info-table-helper">Revision number</td>
                    <td>CR-{{ $projectRevision->revision }}</td>
                </tr>
                <tr>
                    <td class="info-table-helper">IO</td>
                    <td>{{ $io }}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
@if($groundTruth)
    <div class="alert">
        <strong>NOTE:</strong> Script URLs have been modified for GroundTruth.
    </div>
@endif
<table class="main-table">
    <thead>
    <tr>
        <th style="width: 20%">Description</th>
        <th style="width: 30%">Click through URL with UTM</th>
        <th style="width: 50%">Script</th>
    </tr>
    </thead>
    <tbody>
    @foreach ($banners as $attachment)
        <tr>
            <td>{{ $attachment->description }}</td>
            <td>{{ $utm }}</td>
            <td>{{ trim($attachment->content) }}</td>
        </tr>
    @endforeach
    </tbody>
</table>
<footer style="font-family: 'Times New Roman'">
    Generated {{ \Carbon\Carbon::now()->format('Y-m-d @ g:i a') }} by {{ currentUser()->fullName }}
</footer>
</body>
</html>

标签： laravelpdfdompdf

laravel - dompdf 表格单元格溢出表外

问题描述

解决方案

推荐阅读