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?
The easiest way is to put inside your cell a div filling it and set its overflow style property. If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
use overflow-y if you only want a vertical scroll bar and overflow if you want both a vertical and horizontal. Note: setting an overflow attribute to scroll will always display the scrollbars. If you want the horizontal/vertical scrollbars to only show up when needed, use auto .
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With