表格单元格的滚动条

Question

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

- Prasanna

---

你可以使用jQuery的jscrollpane来实现。 - Klevis Miho

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。 演示

- Denys Séguret

---

在表格行中，除了同一行的第一个和最后一个单元格之外，是否可以为所有td单元格添加滚动条？ - user3281466

为了让它正常工作，我还需要使用 table-layout: fixed;。 - Stefan Dragnev

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/

希望这能帮到你。

- Parag

---

你的代码也失败了：http://jsfiddle.net/7T2S4/78/ 因为你只是做了一个非常具体的例子，它能够工作，并不意味着它是一个好的解决方案。 - vsync

垂直同步，我在2016年使用FF新版本访问了那个页面，似乎工作正常。也许你遇到了“旧”的浏览器问题。一个重要的点，最低要求是，除了“overflow:auto”之外，div显然需要以某种方式设置“height”属性。 - Jose_X

它可以工作了，非常感谢。我曾经很难找到一个有效的解决方案。 - Flyout91

我找到了很多解决方案，但只有这一个有效...非常感谢Parag。 - Manthan Patel

这个很好用。 - ira

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
}

- gopal sharma