Overflow in Table TD width relative width - html

Question

I am struggling with this problem for quite a while now and can't find a proper solution to my problem.
What I have:
<div style="width:150px; border:1px solid #000;overflow: auto;">
<div>SOME TEXT</div>
<table style="width:100%; border:1px solid #0F0;">
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
</tr>
<tr>
<td colspan="3">
<div style="overflow: auto; border:1px solid #F00;">
<table>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
http://jsfiddle.net/37ExS/
Explanation:
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.
What I want:
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.
I hope that was understandable.
UPDATE:
This is how it should behave:
http://jsfiddle.net/eRA33/
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.

Answer 1

The problem is that you can't use the overflow property on the table element. A nicer way of doing it (in my opinion), is to add tbody tags and set them as display: block. This lets them scroll. This also avoids using a bunch of wrapper divs.
Don't worry about using table-layout; it's well supported.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Here's a small fiddle to demonstrate. I put your styles in the style section, as it was easier for me to work that way :)
http://jsfiddle.net/eRA33/2/
HTML
<div class="wrapper">
<div>SOME TEXT</div>
<table class="table-scroll table-data">
<tbody>
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
<tr>
<td colspan="4">
<table class="table-scroll table-detail">
<tbody>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
CSS
.wrapper {
width:180px;
border:1px solid #000;
}
.table-scroll {
width:100%;
table-layout: fixed;
}
.table-scroll tbody {
display:block;
overflow:scroll;
}
.table-data {
border:1px solid #0F0;
}
.table-detail {
border:1px solid #F00;
}