表格内的可滚动 div答案

【问题标题】：Scrollable div inside a table表格内的可滚动 div
【发布时间】：2011-04-24 17:04:50
【问题描述】：

我需要在表格单元格中放置一个可滚动的 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>

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 不再是这样。我能做什么？

【问题讨论】：

我必须问你为什么使用表格进行布局。如果单元格中有实际数据，这可能没问题。请记住，表格不是为布局而设计的。
不幸的是，在我的情况下必须使用表格。我需要修复很久以前写的非常复杂的布局。很难改造。
您的代码（带表格）在 IE8 和 chrome 中运行良好。您确定此示例不适合您吗？
在 Firefox 中工作需要它，但它不需要。我没有在其他浏览器中测试过...

标签： html html-table scrollbar overflow

【解决方案1】：

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

【讨论】：

已经试过了。不会改变任何东西。发现如果我让 height: 100%;和溢出：自动；在上，tbody 变为可滚动的。但这不是我需要的……我需要滚动 div 或 td。

【解决方案2】：

我认为你的主要问题是你不能期望 div 达到 100% 的高度，因为持有它的表格也有一个 % 作为它的宽度。

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 黑客的情况下为 div 提供 100% 的高度以适应浏览器窗口，但失败了。

【讨论】：

谢谢。不幸的是，在这种情况下我不能使用固定高度。如果我没有找到答案我会考虑使用 JS 让表格适合屏幕。

【解决方案3】：

表格实际上使用最小高度，所以每当您的 div 变得比您想要的大时，表格列实际上只是调整大小以适合您的 div，因此您的 div 百分比变得无用。

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

【讨论】：

【解决方案4】：

您应该将 table-layout css 属性更改为“固定”值。

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

【讨论】：

最好解释一下为什么添加table-layout: fixed 是最好的做法。
作为w3schools says的固定表格布局算法意味着“水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容”
很高兴看到您的答案中包含该段落。这是我唯一想指出的。