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

Question

是否可以table像下面这样分配单元格高度？

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

编辑：它不需要是 table 重要的是中心元素具有动态高度并且是可滚动的

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

Answer 1

你可能想要这个：

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

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>

Note: If you want to use % for max-height give height and width equals 100% to your body.

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

HTML table dynamic height for one cell

html

css

html-table

tablelayout