title: How to show hidden content in a printable version of a HTML page
body: <p>I want to convert an HTML table into pdf in javascript or jquery,
  but the table will have hidden rows in the HTML but I want these hidden rows appears also in the pdf.</p>
  
  <p>I was able to turn the table to pdf but the hidden rows aren't in the pdf.
  the table will show some rows in the HTML then the user goes to the next page of the table. so I want all the pages of the table to appear in the pdf </p>
  
  <p>here is my code in HTML and javascript</p>
  
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;div id="tab"&gt;
          &lt;table&gt; 
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Age&lt;/th&gt;
                          &lt;th&gt;Job&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Brian&lt;/td&gt;
                      &lt;td&gt;41&lt;/td&gt;
                          &lt;td&gt;Blogger&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Matt&lt;/td&gt;
                      &lt;td&gt;25&lt;/td&gt;
                          &lt;td&gt;Programmer&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Arun&lt;/td&gt;
                      &lt;td&gt;39&lt;/td&gt;
                          &lt;td&gt;Writter&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr style="display: none"&gt;
                  &lt;td&gt;Arun&lt;/td&gt;
                      &lt;td&gt;39&lt;/td&gt;
                          &lt;td&gt;Writter&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr style="display: none"&gt;
                  &lt;td&gt;Arun&lt;/td&gt;
                      &lt;td&gt;39&lt;/td&gt;
                          &lt;td&gt;Writter&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr style="display: none"&gt;
                  &lt;td&gt;Arun&lt;/td&gt;
                      &lt;td&gt;39&lt;/td&gt;
                          &lt;td&gt;Writter&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;p&gt;
          &lt;input type="button" value="Create PDF" 
              id="btPrint" onclick="createPDF()" /&gt;
      &lt;/p&gt;
  &lt;/body&gt;
  &lt;script&gt;
      function createPDF() {
          var sTable = document.getElementById('tab').innerHTML;
  
          var style = "&lt;style&gt;";
          style = style + "table {width: 100%;font: 17px Calibri;}";
          style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
          style = style + "padding: 2px 3px;text-align: center;}";
          style = style + "&lt;/style&gt;";
  
          // CREATE A WINDOW OBJECT.
          var win = window.open('', '', 'height=700,width=700');
  
          win.document.write('&lt;html&gt;&lt;head&gt;');
          win.document.write('&lt;title&gt;Profile&lt;/title&gt;');   // &lt;title&gt; FOR PDF HEADER.
          win.document.write(style);          // ADD STYLE INSIDE THE HEAD TAG.
          win.document.write('&lt;/head&gt;');
          win.document.write('&lt;body&gt;');
          win.document.write(sTable);         // THE TABLE CONTENTS INSIDE THE BODY TAG.
          win.document.write('&lt;/body&gt;&lt;/html&gt;');
  
          win.document.close();   // CLOSE THE CURRENT WINDOW.
  
          win.print();    // PRINT THE CONTENTS.
      }
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>