html - Repeat thead on each page generating pdf using iTextSharp -


generating html pdf using itextsharp library. scenario different have here 1 tr in repeating number of div after conversion overlapped.

sharing images/code clarify.

<html>    <head>    <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;      }            @media print {        @page {          size: a4 landscape;        }      }            thead {        display: table-header-group      }            table {        -fs-table-paginate: paginate;      }            @media print {        thead {          display: table-header-group;        }      }            .div-tr>div {        width: 200px;        display: table-cell;        vertical-align: inherit;        padding: 10px;      }            .div-tr {        page-break-inside: avoid;        display: table-row;        vertical-align: inherit;        border-color: inherit;      }    </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="">      <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=" ">              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>              <div class="div-tr">                <div> column td1 </div>                <div> column td2 </div>                <div> column td3 </div>                <div> column td4 </div>                <div> column td5 </div>              </div>            </div>          </td>        </tr>      </tbody>    </table>  </body>    </html>

enter image description here


Comments

Popular posts from this blog

html - How to set bootstrap input responsive width? -

javascript - Highchart x and y axes data from json -

javascript - Get js console.log as python variable in QWebView pyqt -