Overflow in the table Width of the relative width of the table

Question

I have been struggling with this problem for quite some time and cannot find the right 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 fixed-link content wrapper that contains some other divs and a data table. Inside the data table is a row that contains another table with details regarding the row above it.

What I want:

In the cell of the table that currently has the column number "3" containing the details table, it should have an overflow of content, creating a scroll bar. This is why I wrapped the content in another div, but it looks like the width of the div is determined by its content, not the width of its parents (TD). setting a fixed width for inner div works, but I want it dynamically since I really don't know the width of the content shell.

Hope this was clear.

UPDATE:

Here's how it should behave: http://jsfiddle.net/eRA33/

I could use this and be fine, but I really don't know cross-browser support, and it looks a bit hacked to me, it would be nice if someone had a better way to do this.

Answer 1

The problem is that you cannot use the overflow property of a table element. A good way to do this (in my opinion) is to add tbody tags and set them as display: block . This allows them to scroll. It also avoids the use of a bunch of wrapper delimiters.

Do not worry about using table-layout; It is well maintained.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Here is a small violin to demonstrate. I put your styles in the style section, as it was easier for me to work this 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; }