Lors de l'exportation en pdf, le tableau devrait ajouter une autre page quand la table ne rentre pas

Question

Je sais qu'il me manque quelque chose dans mon code. Lors de l'exportation au format PDF, il convient d'ajouter automatiquement une autre page lorsque la table ne rentre pas tout en un. Il coupe également la table au milieu de tr. J'ai essayé page-break-inside:'avoid' mais pas de succès. Réponses que j'ai regardé autour de cela ne semble pas fonctionner pour le mien.

CSS:

table, 
table tr td, 
table tr th { 
    page-break-inside: avoid;} 

Tableau Export:

jQuery(function ($) { 
    $("#exportButton").click(function() { 
     var dataSource = shield.DataSource.create({ 
      data: "#centralTable", 
      schema: { 
       type: "table", 
       fields: { 
        No: { type: Number }, 
        Unit: { type: String }, 
        Rent: { type: Number }, 
        Utilities: { type: String }, 
        Pets: { type: String}, 
        Other: { type: String}, 
        Description: {type:String}, 
        Status: {type: String} 
       } 
      } 
     }); 

     dataSource.read().then(function (data) { 
      var pdf = new shield.exp.PDFDocument({ 
       author: "PrepBootstrap", 
       created: new Date() 
      }); 

      pdf.addPage("a4", "landscape"); 
      pdf.table(
       50, 
       50, 
       data, 
       [ 
        { field: "No", title: "#", width:30 }, 
        { field: "Unit", title: "Unit#", width: 50 }, 
        { field: "Rent", title: "Rent", width: 70 }, 
        { field: "Utilities", title: "Utilities", width: 70 }, 
        { field: "Pets", title: "Pets", width: 70 }, 
        { field: "Other", title: "Other", width: 70 }, 
        { field: "Description", title: "Description", width: 200 }, 
        { field: "Status", title: "Status", width: 100 } 
       ], 
       { 
        margins: { 
         top: 50, 
         left: 50 
        } 
       } 
      ); 

      pdf.saveAs({ 
       fileName: "testexport" 
      }); 
     }); 
    }); 
}); 

HTML:

<table id="centralTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
     <thead> 
     <tr> 
      <th>No</th> 
      <th>Unit</th> 
      <th>Rent</th> 
      <th>Utilities</th> 
      <th>Pets</th> 
      <th>Other Payment</th> 
      <th>Description of other payment</th> 
      <th>Status</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <th scope="row">1</th> 
      <td>CEN01</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     </tbody> 

Answer 1

Essayez d'ajouter le CSS suivant:

table tr th, table tr {position: relative;} 

Apparemment, le parent et l'élément sur lequel vous voulez contrôler le saut de page doivent être déclarés en tant que position relative.