dompdf table cells overflowing outside table

Question

I am generating a PDF using dompdf and one of the table cells is overflowing past the edge of the page. I am unable to find any reasoning for this as when displayed as a regular HTML page this doesn't happen. What potential workarounds might there be for this so the cell stays within the cell?

Code (contains Laravel blade syntax):

<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>

score 0 · Answer 1 · answered Dec 27 '20 at 22:29

0

Fixed with:

    .main-table td {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

From: Word-wrap in an HTML table Author: ßãlãjî

answered Dec 27 '20 at 22:29

Alex

9,215
8
39
82

dompdf table cells overflowing outside table

1 Answers1