CSS width scroll bar 100% (overflow-x) in table cell

Question

This is my first post. Finally, I decided to join you on stackoverflow!

My problem is with the horizontal scrollbar, which should fit 100% of the container. In the following example, you will find everything you need to understand my problem.

http://jsfiddle.net/cexUr

So, the question will be: why does the code work fine in the first case, but when it is nested in the table cell (second case), then the scrollbar overflows its container? Why is this happening and how can it be fixed? You could say, “just get rid of the tables,” but I need this code running on a large site that has a table. Getting rid of tables will be a hundred hours of work for me.

The main difference between the first (correct) and second scrollb (wrong):

First scroll (correct)

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

CSS horizontal scroll code:

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

Second scroll (invalid)

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

I will really appreciate your wise suggestions.

Gerard.

Answer 1

table { table-layout: fixed; }

To fix the table, it was solved for me.

Edit : I think I'm a few seconds late!

Answer 2

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

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

Here is an example:

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