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

Question

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

3

是否有可能创建一个表格，使单元格的高度分布如下所示？

______________________________________
|            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>

编辑：这不需要是一个表格，只要中心元素具有动态高度并且可以滚动很重要。

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

- Thomas Sparber

首先，没有类似于“scroll:auto;”的属性，应该使用“overflow:auto;”。其次，必须指定高度，如果高度超出，则会出现滚动条。 - divy3993

@divy3993 当然，是我的错 :-) - Thomas Sparber

@divy3993 抱歉，我不明白...我需要指定高度是为了什么？如果我指定根元素（在这种情况下是表格）的高度，这不足够吗？ - Thomas Sparber

我提到了高度，而不是宽度。 - divy3993

还有，你所说的动态是什么意思？你是想说它将没有特定的高度，而是取决于内容。如果中间部分的内容比较多，那么它的高度将自动增加。 - divy3993

1个回答

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

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

- divy3993 · Accepted Answer

你可能需要这个：

1）我为表格设置了“height:auto”，并且在表格中，“width:80%”是可选的。

2）td内部的Div被赋予“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 中使用 %，请将 body 的 height 和 width 都设置为 100%。