title: On export to pdf, table should add another page when table does not fit
body: <p>I know I am missing something in my code. On export to PDF, it should automatically add another page when the table does not fit all in one. It also cuts the table off right in the middle of <code>tr</code>. I've tried <code>page-break-inside:'avoid'</code> but no success. Answers I've looked around related to this does not seem to work for mine.</p>
  
  <p>CSS:</p>
  
  <pre><code>table,
  table tr td,
  table tr th {
      page-break-inside: avoid;}
  </code></pre>
  
  <p>Table Export:</p>
  
  <pre><code>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"
              });
          });
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id="centralTable" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;No&lt;/th&gt;
            &lt;th&gt;Unit&lt;/th&gt;
            &lt;th&gt;Rent&lt;/th&gt;
            &lt;th&gt;Utilities&lt;/th&gt;
            &lt;th&gt;Pets&lt;/th&gt;
            &lt;th&gt;Other Payment&lt;/th&gt;
            &lt;th&gt;Description of other payment&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;1&lt;/th&gt;
            &lt;td&gt;CEN01&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
  </code></pre>
  
  <p></p>