Search code examples
htmlscrollbarhtml-table

scroll bar for a table cell


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?


Solution

  • 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