Scrollable div inside table cell using css

[jenGo]

I want to be able to set a max width on the div and have the overflow be handled with scroll-bars.This works in FF, but not in IE or chrome so well... the scrolling part seems to work OK but the width of the table doesn't adjust like it does in FF, the width is still accounting for the scrollable div in chrome and IE. FF the main table adjusts perfectly.I realize that you're not supposed to use a <div> inside of a <span> etc, just want ideas on how to accomplish this overflow...jsFiddleHere is my example:<div> <table style="width: 100%"> <tr> <td>foo</td> <td>bar</td> </tr> <tr> <td colspan="2" class="uiTest"> <span> <div class="uiTableContainer"> <table class="uiTable" cellspacing="0"> <tbody> <tr class="uiTableRow"> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td class="uiTableAction"> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td class="uiTableAction"> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td class="uiTableAction"> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td class="uiTableAction"> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td class="uiTableAction"> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td class="uiTableAction"> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> <td> foo </td> </tr> </tbody> </table> </div> </span> </td> </tr> <tr> <td>foo</td> <td>bar</td> </tr> </table></div>And the css:.uiTable{ border: 1px solid red; width: 100%;}.uiTableContainer{ max-width: 200px; overflow: auto;}