CSS 100% width scrollbar (overflow-x) within a table cell

Question

it's my first post. Finally I decided to join you all at stackoverflow!

My problem is about an horizontal scrollbar which has to fit 100% to its container. In the following example you'll find everything you need to understand my problem.

http://jsfiddle.net/cexUr

So the question would be: why the code works fine in first case but when nested within a table cell (second case) then the scrollbar overflows its container? Why this happens and how could it be fixed? One could say: "just get rid of tables", but I need this code working in a big site which has some table layout. Getting rid of tables would represent for me hundred hours of work.

Main difference between first (correct) and second scrollb (incorrect) is:

First scroll (correct)

<div class="hscroll"> (images) </div>

CSS code of the horizontal scroll:

.hscroll {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

Second scroll (incorrect)

<table><tr><td> (same code as first scroll) </td></tr></table>

I'll appreciate your wise suggestions very much.

Gerard.

Solution 1

table { table-layout: fixed; }

Making the table fixed solved it for me.

Edit: seems I'm a few seconds too late!

Solution 2

Add table-layout: fixed; to your .table class.

.table{width:100%;margin-top:50px; table-layout: fixed; }

Here's an example:

http://jsfiddle.net/cexUr/2/