一个单元格的 HTML 表格动态高度答案

【问题标题】：HTML table dynamic height for one cell一个单元格的 HTML 表格动态高度
【发布时间】：2016-01-27 10:46:05
【问题描述】：

是否可以有一个像下面这样分布单元格高度的表格？

______________________________________
|            fixed height            |
|____________________________________|
|                                    |
|                                    |
|           dynamic height           |
|                                    |
|____________________________________|
|            fixed height            |
|____________________________________|

所以第一个和最后一个单元格的高度是固定的，中心单元格应该是动态和可滚动的。

目前我有以下代码，但它不起作用：

<table style="max-height:200px">
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto">
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

编辑：它不需要是表格，中心元素具有动态高度并且可滚动很重要

编辑：我知道我可以指定要滚动的元素的高度 - 然后它就可以工作了。但我希望元素的高度是动态的

【问题讨论】：

首先，没有什么像scroll:auto;，它是overflow:auto;，其次你必须为它指定高度，如果遇到之后可以滚动。
@divy3993 是的，当然，我的错误 :-)
@divy3993 对不起，我不明白...我需要指定高度是什么？当我指定根元素的高度（在本例中为表格）时还不够吗？
我说的是高度而不是宽度。
还有动态是什么意思？你想说的是，它将有没有特定的height，并且取决于内容。如果中间的内容多于它的高度将自动增加。

标签： html css html-table tablelayout

【解决方案1】：

你可能想要这个：

1) 我把height:auto 给了table，这里width:80% 给table 是可选的。

2) td 中的 Div 与 overflow:auto; 一起被指定为 height:60px;（只是随机显示滚动条）以及 overflow:auto;。

3)第一个和第二个td's有具体的height:30px;

看看这个：

<table style="height:auto; width:80%;" border=1>
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto; height: 60px;">
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

更新：没有具体高度

在更新中我使用了max-height

<table style="height:auto; width:75%; margin:0px auto;" border=1>
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto; max-height:100px;">
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

注意：如果您想将% 用于max-height，请将height 和width 等于100% 用于您的body。

【讨论】：

感谢您的回答，问题是您明确指定了要滚动的元素的高度。但正如解释的那样，它应该是动态的。我会让问题更清楚
第一件事忘记宽度，我们不是在谈论高度吗？
其次，我指定了高度以带来scroll-bar，如果您不指定任何 div 的高度，滚动条将永远不需要。因为您没有指定高度，所以div 会自动获取高度，以便所有内容都适合。
好的，我明白了...我认为它可以与max-height:100% 之类的东西一起使用...所以我的问题的答案是不可能？
让我们continue this discussion in chat.