title: Overflow in Table TD width relative width
body: <p>I am struggling with this problem for quite a while now and can't find a proper solution to my problem.</p>
  
  <p><strong>What I have:</strong></p>
  
  <pre><code>&lt;div style="width:150px; border:1px solid #000;overflow: auto;"&gt;
      &lt;div&gt;SOME TEXT&lt;/div&gt;
      &lt;table style="width:100%; border:1px solid #0F0;"&gt;
          &lt;tr&gt;
              &lt;td&gt;HEAD1&lt;/td&gt;
              &lt;td&gt;HEAD2&lt;/td&gt;
              &lt;td&gt;HEAD3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="3"&gt;
                  &lt;div style="overflow: auto; border:1px solid #F00;"&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td&gt;HEAD&lt;/td&gt;
                              &lt;td&gt;HEAD&lt;/td&gt;
                              &lt;td&gt;HEAD&lt;/td&gt;
                              &lt;td&gt;HEAD&lt;/td&gt;
                              &lt;td&gt;HEAD&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;QQQQ&lt;/td&gt;
                              &lt;td&gt;QQQQ&lt;/td&gt;
                              &lt;td&gt;QQQQ&lt;/td&gt;
                              &lt;td&gt;QQQQ&lt;/td&gt;
                              &lt;td&gt;QQQQ&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/37ExS/" rel="nofollow noreferrer">http://jsfiddle.net/37ExS/</a></p>
  
  <p><strong>Explanation:</strong> </p>
  
  <p>The outer div represents my content wrapper with a fixed with, which contains some other divs and a table with data.
  Inside of the data table is a row, which contains another table with detailed data in reference to the row above it.</p>
  
  <p><strong>What I want:</strong> </p>
  
  <p>The table cell, which currently has a colspan of "3", containing the detail table should have it's overflowing content creating a scrollbar. Which is why I wrapped the content in another div, but it seems like the div's width is determined by it's content, rather than by it's parents (TD) width. setting a fixed width for the inner div works, but I want it dynamically, since I really don't know the width of the content wrapper.</p>
  
  <p>I hope that was understandable.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>This is how it should behave:
  <a href="http://jsfiddle.net/eRA33/" rel="nofollow noreferrer">http://jsfiddle.net/eRA33/</a></p>
  
  <p>I could use that and be fine about it, but I really don't know the cross-browser support and it looks a bit hacky to me, would be nice, if someone has a nicer way of doing that.</p>