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?

Poorhouse

You can use the jquery jscrollpane for that. – Hathorn

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

Spinifex

Is it possible to add a scrollbar to all td cells in a table row except the first and last cells in the same row? – Geanticlinal

I also needed table-layout: fixed; to get it to work. – Abduce

Answer 2

<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

Townsman

you code also fails: jsfiddle.net/7T2S4/78 because you've made a very very specific example that works, doesn't mean it's a good solution. – Erastes

vsync, I went to that page with FF new version in 2016, and it seems to work fine. Maybe you had "old" browser issues. An important point, a minimal requirement, is that the div apparently needs to have "height" attribute set in some way in addition to the "overflow:auto". – Squinteyed

It works thank you very much. I had trouble to find a valid solution. – Wharton

i find many solution but only this one works ..thank you so much Parag – Amboina

This one works well – Plaice

Answer 3

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
}

Nicoline

Answer 4

I had the same problem I believe but was finding that a scrolling div was still expanding across my page, so had to combine with a fixed table-layout.

    #input, #output {
        font:10px 'Lucida Console', 'courier new', monospace;
        height:100%;
        width:100%;
        overflow:auto;
        border:1px inset;
        padding:2px;
        background-color:#fff;
        white-space:pre;
    }
    table {
        width: 100%;
        height: 100%;
        table-layout: fixed;
        cellspacing:0;
        cellpadding:0;
    }

    <table>
        <tbody>
            <tr>
                <td width="50%"">
                    <div id="input" title="input"></div>
                </td>
                <td width="50%"">
                    <div id="output" title="output"></div>
                </td>
            </tr>
        </tbody>
    </table>

Massy