title: How to make row layout ignore previous row
body: <p>I have a row, whose last <code>td</code> element needs to take up 50% of the row's width:</p>
  
  <p><a href="http://jsfiddle.net/741q8nnc/1/" rel="nofollow">Take a look at column 3.</a></p>
  
  <p>However, I also need the <code>td</code> in the first row to fill up entire row. When I set its width to 100%, it affects the second row:</p>
  
  <p><a href="http://jsfiddle.net/741q8nnc/" rel="nofollow">Now look what happened!</a></p>
  
  <p>Is there a way to make the second row ignore the column size of the previous row(s)?<br>
  The only alternative I can think of is using a single <code>td</code> in 2nd row, and doing the division inside it (which might work in my simplified example, but in real life would be an absolute mess).</p>
  
  <p>Browser: Google Chrome.</p>
  
  <p>NOTE: Unfortunately, using divs instead of tables isn't an option :(</p>