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?

回答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

回答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

回答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 } 

文章来源: scroll bar for a table cell