为表格单元格的滚动条(scroll bar for a table cell)

2019-07-17 19:36发布

有没有一种方法,以滚动条添加到“TD”标签? 我有一个“TD”标签内的动态内容。 我想“TD”是固定大小的,并且如果内容变得比“TD”尺寸大,我想滚动条只显示在该特定小区。 有没有一种方法来实现这一目标?

Answer 1:

是的,你可以这样做。

最简单的方法是把你的细胞内一个div填充它,并设置其overflow的场所。

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>

如果你想滚动条是始终可见,即使内容不被裁剪,替换autoscroll的CSS。

示范



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/

希望这可以帮助



Answer 3:

如果您需要提供或者“高度”或DIV元素的“宽度”,因此,它会进行相应的滚动。 比如你要应用垂直滚动(Y轴): -

<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