表格单元格的滚动条答案

【问题标题】：scroll bar for a table cell表格单元格的滚动条
【发布时间】：2017-04-06 22:06:55
【问题描述】：

有没有办法在“td”标签上添加滚动条？我在“td”标签中有一个动态内容。我希望“td”具有固定大小，如果内容变得大于“td”大小，我希望滚动条仅出现在该特定单元格上。有没有办法做到这一点？

【问题讨论】：

您可以使用 jquery jscrollpane。

标签： html scrollbar html-table

【解决方案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。

Demonstration

【讨论】：

除了同一行的第一个和最后一个单元格之外，是否可以为表格行中的所有 td 单元格添加滚动条？
我还需要table-layout: fixed; 才能让它工作。

【解决方案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/

希望对你有帮助

【讨论】：

你的代码也失败了：jsfiddle.net/7T2S4/78 因为你做了一个非常具体的例子，但并不意味着它是一个好的解决方案。
vsync，我在 2016 年使用 FF 新版本访问了该页面，它似乎工作正常。也许您有“旧”浏览器问题。重要的一点，最低要求是，除了“overflow:auto”之外，div 显然还需要以某种方式设置“height”属性。
非常感谢您。我很难找到有效的解决方案。
我找到了很多解决方案，但只有这个有效..非常感谢 Parag

【解决方案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
}

【讨论】：