title: How to break a table with CSS diagonally or vertically?
body: <p>If you have a <code>&lt;table&gt;</code> that is either very tall or very wide, and you wish to have it wrap to display on a screen. How can this be done with CSS?</p>
  
  <p>Example: A table that is 300% page height and 30% page width would be broken into three parts.</p>
  
  <pre><code>#
  #
  #
  #
  #
  #
  </code></pre>
  
  <p>to</p>
  
  <pre><code># # #
  # # #
  </code></pre>
  
  <p>I'm looking for a pure CSS solution, is this possible?</p>
  
  <p>Edit: HTML Sample</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Foo&lt;/th&gt;
              &lt;th&gt;Bar&lt;/th&gt;
              &lt;th&gt;Baz&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;42&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;34&lt;/td&gt;
          &lt;/tr&gt;
          [snip 100 lines]
          &lt;tr&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;0&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>