title: Line break in table
body: <p>My web page is divided into two columns, left and right. In the right column I have a table that is quite long horizontal, so it doesn't fit on the screen (see illustration 3 below). The only thing I can think of is to split the table into to lines (see illustration 2 below).</p>
  
  <p>Therefore I want a line break in the middle of this table, after the 4th <em>th</em> and <em>td</em>.</p>
  
  <p>Splitting with a tr after the 5th th and td cell doesn't do the trick because it will stack up the ths under each other and under them the tds (see illustration 1 below).</p>
  
  <h3>Illustration 1:</h3>
  
  <pre><code>th1 th2 th3 th4
  th5 th6 th7 th8
  td1 td2 td3 td4 &lt;- tds
  td5 td6 td7 td8 &lt;- tds
  </code></pre>
  
  <h3>Illustration 2 (what I want):</h3>
  
  <pre><code>th1 th2 th3 th4
  td1 td2 td3 td4 &lt;- tds
  
  th5 th6 th7 th8
  td5 td6 td7 td8 &lt;- tds
  </code></pre>
  
  <h3>Illustration 3:</h3>
  
  <p><strong>The problem:</strong></p>
  
  <pre><code>---------------------------------------------
  |                    :                      |
  |                    :                      |
  |                    :   Header1  Header2   Header3   Header4
  |                    :     1        12      | 40         5
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  ---------------------------------------------
  </code></pre>
  
  <p><strong>Desired output:</strong></p>
  
  <pre><code>---------------------------------------------
  |                    :                      |
  |                    :                      |
  |                    :   Header1  Header2   |
  |                    :     1        12      |
  |                    :                      |
  |                    :   Header3   Header4  |
  |                    :     40         5     |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  |                    :                      |
  ---------------------------------------------
  </code></pre>
  
  <p>Of course I could use two separate tables, but that won't work in my case by several reasons.</p>
  
  <p><strong>The code:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Header 1&lt;/th&gt;
              &lt;th&gt;Header 2&lt;/th&gt;
              &lt;th&gt;Header 3&lt;/th&gt;
              &lt;th&gt;Header 4&lt;/th&gt; // Line break
              &lt;th&gt;Header 5&lt;/th&gt;
              &lt;th&gt;Header 6&lt;/th&gt;
              &lt;th&gt;Header 7&lt;/th&gt;
              &lt;th&gt;Header 8&lt;/th&gt;
         &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Foo 1&lt;/td&gt;
              &lt;td&gt;Foo 2&lt;/td&gt;
              &lt;td&gt;Foo 3&lt;/td&gt;
              &lt;td&gt;Foo 4&lt;/td&gt; // Line break
              &lt;td&gt;Foo 5&lt;/td&gt;
              &lt;td&gt;Foo 6&lt;/td&gt;
              &lt;td&gt;Foo 7&lt;/td&gt;
              &lt;td&gt;Foo 8&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How can that be achieved?</p>
  
  <p><a href="http://jsfiddle.net/HV7BH/" rel="nofollow">Here's a fiddle to play with</a> &lt;------- !</p>