Trying to create a scrollable cell?

Question

I have a table that has one cell that will be receiving much more input than other cells. I want to be able to scroll the cell horizontally so that each cell in the table does not get bigger in order to accommodate that cells content.

<div class = "Table">
   <div class = "Row">
      <div class = "Cell">Name</div>
      <div class = "Cell">Info</div>
      <div class = "Cell">A lot of content, content, content, content, content</div>
      <div class = "Cell">Phone Number</div>
   </div>
</div>

Here is an example of the table I keep getting:

 +-----+-------+----------------------------------+
 | Jon | 45.45 | somecontent,      | xxx-xxx-xxxx |
 |     |       | somecontent,      |              |
 |     |       |   somecontent     |              |
 |     |       | ,somecontent      |              |
 +-----+-------+-------------------+--------------+

Is there any way I can make the third cell scrollable? So that no matter how much input is placed in it all other cells will remain unscathed?

Here is an example of what I want:

+-----+-------+---------------------------------------------------+--------------+
| Jon | 45.45 | somecontent,somecontent,somecontent,somecontent.. | xxx-xxx-xxxx |
+-----+-------+<--------------------___SCROLLBAR____---------->---+--------------+

There is nothing special about my css at the moment:

 .Table{ display: table ; }
 .Row{display: table-row; }
 .Cell{display:table-cell ;}

Here is a jsfiddle: http://jsfiddle.net/DJXvD/

Answer 1

Here's my solution:

<div class = "Table">
    <div class = "Row">
        <div class = "Cell">Name</div>
        <div class = "Cell">Info</div>
        <div class = "Cell"><span>A lot of content, content, content, content, content, 
                                  content, content, content, content...</span></div>
        <div class = "Cell">Phone Number</div>
    </div>
</div>

And here's CSS:

.Table { 
    display: table ; 
    border-collapse:collapse;
}

.Row{
    display: table-row;
}

.Cell{
    display:table-cell;
    padding: 2px 5px;
    border: 1px solid red;
}

.Cell > span {
    white-space: nowrap;
    display: block;
    width: 200px;
    overflow-x: auto;
}