CSS 100% de la largeur de la barre de défilement (overflow-x) dans une cellule de tableau

c'est mon premier post. Finalement, j'ai décidé de me joindre à vous tous à stackoverflow!

Mon problème est sur une barre de défilement horizontale qui a pour s'adapter à 100% à son conteneur. Dans l'exemple suivant, vous trouverez tout ce dont vous avez besoin pour comprendre mon problème.

http://jsfiddle.net/cexUr

Donc la question serait: pourquoi le code fonctionne dans le premier cas, mais quand imbriquée à l'intérieur d'une cellule de tableau (deuxième cas) puis la barre de défilement des débordements de son contenant? Pourquoi cela arrive et comment pourrait-il être fixé?
On pourrait dire: "tout se débarrasser des tables", mais j'ai besoin de ce code de travail dans un grand site qui a une certaine disposition de table. Se débarrasser des tables représenterait pour moi cents heures de travail.

Principale différence entre la première (correct) et la deuxième scrollb (incorrect) est:

Première de défilement (correct)

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

Code CSS de la barre de défilement horizontale:

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

Deuxième de défilement (incorrect)

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

Je vais apprécier votre sage suggestions très bien.

Gérard.

OriginalL'auteur Gerard | 2013-04-06