Question

我正在创建一个可以多页长的HTML表。

在第一页上，一切都在排队并且看起来很好，但在第一次分页后，只有表头浮动到左侧站点。

我试图给表格一个固定的宽度来解决问题，但这没有任何影响。

以下是展示错误的屏幕截图：

我找不到解决此问题的方法，所以现在我要问如何解决它，以便表格的标题与其余部分一致。

这是一些生成表格的缩短代码：

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

这是在TCPDF中呈现HTMLCell的代码

$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);

Answer 1

我通过在两个表之间添加分页符<br />来解决问题

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

分页后，TCPDF表头浮动

1 个答案: