表格内的可滚动div

Question

表格内的可滚动div

4

我需要在表格单元格中放置一个可滚动的div。表格应该是100%的高度。这个div有很多内容，不适合屏幕，所以应该出现滚动条。但我只想让div可以滚动，而不是整个页面。
如果我不使用表格，一切都很完美：

<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;  border-style: solid;">
    <div>
       Item 1<br/>
       Item 2<br/>
       ...
       Item 300<br/>
    </div>
</div>

可以滚动，页面没有滚动条。但如果它被包含在表格中：

<table style="height: 100%">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
                border-style: solid;">
                <div>
                   Item 1<br/>
                   Item 2<br/>
                   ...
                   Item 300<br/>
                </div>
            </div>
        </td>
    </tr>
</table>

页面变得可滚动，div 不再是固定的。我该怎么办？

- timkishkin

我必须问一下，为什么您要使用表格进行布局。如果单元格中有实际数据，这可能还可以接受。请记住，表格不是为布局而设计的。 - Benbob

很遗憾，在我的情况下需要使用表格。我需要修复一个相当久远的非常复杂的布局。重新制作它很困难。 - timkishkin

你的代码（带表格）在IE8和chrome中运行良好。你确定这个样本对你没有起作用吗？ - zgorawski

需要在Firefox中工作，但它却没有。我还没有在其他浏览器中测试过... - timkishkin

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucas · Answer 1

我认为你的主要问题在于你不能期望div元素高度达到100%，因为包含它的table元素也是以百分比作为宽度。

div元素的容器必须有一个绝对高度。

这是我的代码：

<table height="2000px">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
                Item 1<br/>
                Item 2<br/>
                ...<br/>
                Item 300<br/>
            </div>
        </td>
    </tr>
</table>

这个使用了 div 上的滚动条，并且由于其高度也使页面滚动条出现。

不幸的是，除非您使用一些 hacky 的 CSS 解决方法（可能在所有浏览器中都无法工作），否则您无法告诉 div 以 100% 的高度显示，除非像我上面所做的那样给其容器一个绝对高度。

如果我错了，我相信有人会纠正我，但我曾经尝试过在没有 CSS 或 Javascript hack 的情况下将 div 的高度设置为 100％，但失败了。

- graemeboy · Answer 2

表格实际上使用最小高度，因此当您的 div 大于您想要的大小时，表格列实际上只是调整大小以适应您的 div，因此您的 div 百分比被渲染无用。

您需要使用 div，而不是表格。

- MatTheCat · Answer 3

0

在 <td> 上不应该有 height: 100%; 和 overflow: auto; 吗？

- MatTheCat

已经尝试过了，没有任何变化。发现如果我在<tbody>上设置height: 100%;和overflow: auto;，tbody就会变成可滚动的。但这不是我需要的...我需要滚动div或td。 - timkishkin

- TTM · Answer 4

你应该将table-layout的CSS属性更改为“fixed”值。

<table style="table-layout: fixed; width: 100%;">
    <tr>
        <td>
            <div style="overflow: scroll;">
                Scrollable div
            </div>
        </td>
    </tr>
</table>