Horizontal scroll in table cell

Question

I have the following peculiar problem. Lets start with a code snippet:

...
<td>
   <div class="scrollable">...</div>
   ...other cell content...
</td>
...

Now I want the table render as if the div.scrollable wouldn't take any horizontal space (i.e. the div.scrollable doesn't push on the right side of the table), but show the horizontal scrollbar (on the div.scrollable, not on the whole cell) if the div.scrollable is wider then the containing cell. Is that possible to do via CSS?

Thanks!

Answer 1

Using your basic example you would likely need a set width on the td and to use overflow and overflow-y. overflow-y is CSS3 only but you didn't specify IE8 and below.

EDIT sorry you also need display:block; on the td

td { display: block; width: 50px; } 
.scrollable { overflow: scroll; overflow-y:hidden; }

UPDATE: See the jsfiddle example, notice the 100% width on the table and the fixed layout.. thats to stop the example from just adding a horizontal scroll to the viewport and carrying on. http://jsfiddle.net/MMeTe/4/

Answer 2

Credit goes to Pricey as his jsfiddle example answers the question, but to have the answer with the code here, I attach it bellow:

...
<style type="text/css>
  .mytable {
    table-layout: fixed;
  }
  .scrollable{
    overlow-y: auto;
  }
</style>
...
<table class="mytable">
 <tr>
  <td>
   <div class="scrollable">...</div>
   other content...
  </td>
 </tr>
</table>