title: Inner button with `position: absolute` will be placed outside a table
body: <p>Html:</p>
  
  <pre><code>&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td class="container"&gt;
          &lt;button class="del"&gt;delete&lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;div class="container"&gt;
  &lt;button class="del"&gt;delete&lt;/button&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.container {
      position: relative;
      border: 1px solid red;
      height: 50px;
      width: 200px;
  }
  
  .del {
      position: absolute;
      top: 3px;
      right: 3px;
  }​
  </code></pre>
  
  <p>Why the button inside a <code>div</code> will be placed on the top right corner of the div, but the one inside a <code>td</code> will be placed outside the table?</p>
  
  <p>How to fix it?</p>
  
  <p>See active demo: <a href="http://jsfiddle.net/Freewind/d6Tug/" rel="nofollow">http://jsfiddle.net/Freewind/d6Tug/</a></p>