表格单元格的滚动条

Pra*_*nna 28 html html5 html-table scrollbar

有没有办法将滚动条添加到'td'标签?我在'td'标签内有动态内容.我希望'td'具有固定大小,如果内容变得大于'td'大小,我希望滚动条仅出现在该特定单元格上.有没有办法实现这个目标?

Den*_*ret 37

是的,你可以这样做.

最简单的方法是在你的单元格内放一个div来填充它并设置它的overflow样式属性.

CSS:

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<td><div class=scrollable>
    Some content with a scrollbar if it's too big for the cell
</div></td>
Run Code Online (Sandbox Code Playgroud)

如果您希望滚动条始终可见,即使未裁剪内容auto,请scroll在CSS中替换.

示范

  • 我还需要`table-layout:fixed;`来使其工作。 (3认同)

Par*_*rag 12

<table  width ="400" >
    <tr>
        <td >
            <div style="width:100%; max-height:300px; overflow:auto">Your content here 
             </div>
        </td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/7T2S4/1/

希望这可以帮助


小智 5

您应该需要提供 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
}
Run Code Online (Sandbox Code Playgroud)