CODEWITHSUNDEEP
phphtmltcpdfphp-7.1
KhorneHoly
KhorneHoly

Reputation: 4766

TCPDF table header floats after page break

I'm creating a HTML table that can be multiple pages long.

On the first page, everything is in line and looks fine, but after the first page break only the table header floats to the left site.

I tried to give the table a fixed width to resolve the issue, but that didn't had any effect.

Here's a screenshot to showcase the error: the second page is a bit left and not in line with the other parts as displayed by the free hand circles!

I couldn't find a fix for this issue, so now I'm asking how to solve it so that the header of the table in line with the rest.

Here's some shortened code that generates the table:

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color: navy;
                font-family: times;
                font-size: 20pt;
                text-decoration: underline;
            }
            .table {
                font-family: courier;
                font-size: 8pt;
                background-color: #efefef;
                width: 770px;
            }
            .table th {font-family: helvetica, arial; font-weight: bold; border: 1px solid #cccccc; }
            .table td.normal {font-weight: normal}
            .table td {
                font-size: 8pt;
                background-color: #ffffff;
                vertical-align: top;
            }
            .table td.h4 { font-family: helvetica, arial; font-size: 12pt; font-weight: bold; }
            .border-left-solid {border-left: 1px solid #cccccc;}
            .border-right-solid {border-right: 1px solid #cccccc;}
            .border-left-dashed {border-left: 1px dashed #cccccc;}
            .border-bottom-solid {border-bottom: 1px solid #cccccc;}
            .border-top-dotted {border-top: 1px dotted #cccccc;}
            .text-center {text-align: center;}
            .text-right {text-align: right;}

        </style>
        <title>Waypoints</title>
    </head>
    <body>
        <table  cellspacing="0" cellpadding="2" border="0" class="table" width="770px;">
            <thead></thead>
            <tbody>
                <tr>
                    <td width="50%" class="h4">Date from - Date to </td>
                    <td width="50%" class="h4">Last position:</td>
                </tr>
            </tbody>
        </table>
        <table cellspacing="0" cellpadding="2" border="0" class="table">
            <thead>
            <tr>
                <th width="40px;">Sometime</th>
                <th width="260px;">Somewhere</th>
                <th colspan="4" width="190px;">Some course</th>
                <th width="60px;">extra information</th>
                <th colspan="2" width="60px;">wind</th>
                <th colspan="3" width="160px;">weather</th>
            </tr>
            <tr>
                <th width="40px;"></th>
                <th width="260px;"></th>
                <th width="30px;">CoG</th>
                <th width="50px;">SoG</th>
                <th width="50px;">Log</th>
                <th width="60px;">Status</th>
                <th width="60px;"></th>
                <th width="30px;">dir</th>
                <th width="30px;">bft</th>
                <th width="30px;">°C</th>
                <th width="30px;">hPa</th>
                <th width="100px;">sign.</th>
            </tr>
            </thead>
            <tbody>
                {% for waypoint in arrWaypoints %}
                {# generation of the rows #}
            </tbody>
        </table>
    </body>
</html>

This is the code that renders the HTMLCell in TCPDF

$html = $this->twig->render('@App/cruiselog/waypointTable.html.twig', array(
    'arrWaypoints' => $arrWaypoints,
    'cruise' => $cruise,
    'arrOverviewDayData' => $arrOverviewDayData
));
$pdf->SetX(0);
$pdf->writeHTMLCell(0,0,10,$pdf->GetY(),$html,0,1);

Upvotes: 1

Views: 2097

Answers (1)

KhorneHoly
KhorneHoly

Reputation: 4766

I've fixed the problem by adding a pagebreak <br /> between the two tables 

<table  cellspacing="0" cellpadding="2" border="0" class="table" width="770px;">
    <thead></thead>
    <tbody>
        <tr>
            <td width="50%" class="h4">Date from - Date to </td>
            <td width="50%" class="h4">Last position:</td>
        </tr>
    </tbody>
</table>
<br />
<table cellspacing="0" cellpadding="2" border="0" class="table">
    <thead>
        <tr>
            <th width="40px;">Sometime</th>
            <th width="260px;">Somewhere</th>
            <th colspan="4" width="190px;">Some course</th>
            <th width="60px;">extra information</th>
            <th colspan="2" width="60px;">wind</th>
            <th colspan="3" width="160px;">weather</th>
        </tr>
        <tr>
            <th width="40px;"></th>
            <th width="260px;"></th>
            <th width="30px;">CoG</th>
            <th width="50px;">SoG</th>
            <th width="50px;">Log</th>
            <th width="60px;">Status</th>
            <th width="60px;"></th>
            <th width="30px;">dir</th>
            <th width="30px;">bft</th>
            <th width="30px;">°C</th>
            <th width="30px;">hPa</th>
            <th width="100px;">sign.</th>
        </tr>
    </thead>
    <tbody>
        {% for waypoint in arrWaypoints %}
        {# generation of the rows #}
    </tbody>
</table>

Upvotes: 3

Related Questions