title: Printing HTML table with many columns/rows using CSS layout?
body: <p>I want to print a large table (so large that its rows are approx. 3 sheets of papers wide) from HTML. If possible, CSS should suffice for layout and the solution should work with different browsers.</p>
  
  <p>I'm currently defining the following style rules:</p>
  
  <pre><code>table { page-break-inside:auto; }
  tr    { page-break-inside:auto; }
  </code></pre>
  
  <p>When I inspect the DOM elements e.g. in Firefox 33.0.2 (on OS X) I can see that the rules are recognized, but then when I look at a print preview ( <em>File</em> | <em>Print</em> | <em>PDF</em> | <em>Open PDF in Preview</em>) all columns that don't fit on the first page are cut off, i.e. I receive 1 page of printed output instead of 3. I have also tried Internet Explorer 11 and 10 to the same effect.</p>
  
  <p>So how can I layout large HTML tables (ultimately large both in terms of columns an rows) for print out using CSS?</p>
  
  <p>Bonus question: If page-break style components indeed only apply to block-level elements as is indicated in <a href="https://stackoverflow.com/a/1763683/1789384">this</a> previous answer, would it help if I construct my table from <code>div</code>s instead of <code>td</code>s when aiming for print output?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is a relevant sample that I just tried on JSFiddle. (I don't have an account there, so FWIK I cannot provide a direct link.)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_0&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_1&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_2&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_3&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_4&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_5&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_6&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_7&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_8&lt;/td&gt;
  &lt;td&gt;The_quick_brown_fox_jumped_over_the_lazy_dog_A_9&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table { page-break-inside:auto; }
  td    { border:1px solid lightgray; }
  tr    { page-break-inside:auto; }
  </code></pre>
  
  <p>If I try to print this table (e.g. by applying <em>This Frame</em> | <em>Print Frame ...</em> | <em>PDF</em> | <em>Open PDF in Preview</em> to JSFiddle's <em>Result</em> view in Firefox 33.1 for OS X and for Paper Size/Orientation A4/Portrait) I get one page of output. All columns but the first and part of the second are cut off.</p>