title: Table row won't contain elements with position:absolute
body: <p>I have a table like this:</p>
  
  <pre><code>&lt;table cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 1&lt;/td&gt;
          &lt;td&gt;&lt;button&gt;Button 1&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 2&lt;/td&gt;
          &lt;td&gt;&lt;button&gt;Button 2&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 3&lt;/td&gt;
          &lt;td&gt;&lt;button&gt;Button 3&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I wanted to absolutely position each button at the top right of the table row, so I used this CSS, expecting the <code>&lt;tr&gt;</code> to contain the <code>&lt;button&gt;</code>:</p>
  
  <pre><code>tr {
      position:relative;
  }
  button {
     position:absolute;
     top:0;
     right:0;   
  }
  </code></pre>
  
  <p>However, the buttons are all stacked on top of each other in the same place. It normally works fine using <code>&lt;div&gt;</code>s, except it will still behave this way when using <code>display:table-row</code> which I found out while testing, and came as a surprise to me.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/QU2zT/1/">http://jsfiddle.net/QU2zT/1/</a></p>
  
  <p><strong>Note</strong>: My actual markup is more complex, and the element I'm trying to position might appear anywhere in any table cell in it's row, which is why I believe I need <code>position:absolute</code>.</p>
  
  <ol>
  <li>Why does this happen?</li>
  <li>How can I work around this using CSS, without altering the markup?</li>
  </ol>
  
  <p><strong>EDIT</strong>: The results are different in Firefox than they are in Chrome and IE9 (haven't tested beyond that). FF is a complete failure, while the other browsers only fail to contain the "divs with table display" setup, seen in the <a href="http://jsfiddle.net/QU2zT/1/">demo</a>.</p>