scroll bar for a table cell

Question

Is there a way to add a scroll bar to a 'td' tag? I have a dynamic content inside a 'td' tag. I want the 'td' to be of fixed size and if the content becomes larger than the 'td' size, I want a scroll bar to appear only on that particular cell. Is there a way to achieve this?

Answer 1

Yes you can do that.

The easiest way is to put inside your cell a div filling it and set its overflow style property.

CSS :

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

HTML :

<td><div class=scrollable>
    Some content with a scrollbar if it's too big for the cell
</div></td>

If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.

Demonstration

Answer 2

You should need to provide either "height" Or "width" of div element, So that it would be scroll accordingly. for example you want to apply Scroll Vertically(Y-axis):-

<td><div class="scrollable">
    Some content with a scrollbar if it's not fit in your customized container
</div></td>

div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}

Answer 3

<table  width ="400" >
    <tr>
        <td >
            <div style="width:100%; max-height:300px; overflow:auto">Your content here 
             </div>
        </td>
    </tr>
</table>

http://jsfiddle.net/7T2S4/1/

Hope this helps