表格单元格的滚动条

Question

有没有办法向“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>

如果您希望滚动条始终可见，即使内容未裁剪，请在 CSS 中将

auto

替换为

scroll

。

示范

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
}

Answer 4

我相信我也遇到了同样的问题，但发现滚动 div 仍在我的页面上扩展，因此必须与固定的表格布局结合起来。

    #input, #output {
        font:10px 'Lucida Console', 'courier new', monospace;
        height:100%;
        width:100%;
        overflow:auto;
        border:1px inset;
        padding:2px;
        background-color:#fff;
        white-space:pre;
    }
    table {
        width: 100%;
        height: 100%;
        table-layout: fixed;
        cellspacing:0;
        cellpadding:0;
    }

    <table>
        <tbody>
            <tr>
                <td width="50%"">
                    <div id="input" title="input"></div>
                </td>
                <td width="50%"">
                    <div id="output" title="output"></div>
                </td>
            </tr>
        </tbody>
    </table>