将HTML转换为PDF时,需要在每个页面上重复父表格thead

时间:2017-07-19 06:16:26

标签: html css pdf

    

  <style>
    body {
    margin: 0;
    }
    table{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
    }
    thead.t1{
    background: #dac8c8;
    }
    table td , table th{
    padding:10px;
    }
    table{
    margin-top:20px;
    }
    thead.t2{
    background: #dcdcdc;
    }
    @media print{
    @page {
    size: A4 landscape;
    }
    }
    thead { display:table-header-group }
    @media print{
    table {page-break-after:always}
    }
    .no-break {
    page-break-inside: avoid;
    }
    .pagebreakafter_always {
    page-break-after: always;
    }
  </style>

 </head>

<body class="" style="width:1070px; margin:0 auto;">


<div style="height:300px; width:100%; background:#ccc; border-bottom:2px solid #000;">
</div>
    <table class="splitForPrint table-rc1 ">
        <thead class="t1">
        <tr>
            <th> column1 </th>
            <th> column2 </th>
            <th> column3 </th>
            <th> column4 </th>
            <th> column5 </th>
            <th> column6 </th>
            <th> column7 </th>
            <th> column8 </th>
        </tr>
    </thead>

            <tbody>
            <tr>
            <td colspan="8" class="no-break">
                <div class=" table-block ">
                    <table>
                        <tbody>
                            <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr class="pagebreakafter_always ">
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>
                        <tr>
                            <td> column td1 </td>
                            <td> column td2 </td>
                            <td> column td3 </td>
                            <td> column td4 </td>
                            <td> column td5 </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                </td>
            </tr>
            </tbody>
    </table>
</body>

这里我有HTML代码,里面有tr表,但是当我生成PDF时它不正常。我想要的第一个表应该在每一页上重复。 在横向模式下生成PDF。

0 个答案:

没有答案