Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 853
Prasanna Avatar asked Jan 03 '13 09:01

Prasanna


People also ask

How do I add a scrollbar to a table cell?

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.

How do I enable scrollbar in a table?

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.

How do I add a vertical scrollbar to a table?

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 .


1 Answers

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

like image 196
Denys Séguret Avatar answered Sep 28 '22 12:09

Denys Séguret