如何阻止td/tr元素占据表格全部可用高度？

问题 #

设置表格固定高度以实现垂直滚动时，<td>会被自动拉伸填满表格高度，调整max-content或固定高度（如1rem）都无法解决这个问题。

当前表现：单个数据行的单元格占满整个表格高度，内容垂直居中。
预期表现：单元格高度仅适配内容，表格剩余空白区域保留背景色，数据行位于表格顶部。

最小复现代码 #

<html>
    <head>
        <style>
            table {
                width: 100%;
                height: 20rem;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Test Column</th>
                    <th>Test Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test Data</td>
                    <td>Test Data 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

解决方案 #

表格默认的布局算法会自动分配空间填充容器，要实现预期效果，需要将滚动逻辑移到<tbody>上，同时确保行高由内容决定：

<html>
    <head>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
                table-layout: fixed; /* 固定列宽，避免内容挤压错位 */
                background-color: green;
            }

            thead tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }

            tbody {
                display: block;
                height: 20rem; /* 给tbody设置固定高度 */
                overflow-y: auto; /* 开启垂直滚动 */
            }

            tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
                height: fit-content; /* 强制行高适配内容 */
            }

            th, td {
                padding: 0.5rem;
                text-align: left;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Test Column</th>
                    <th>Test Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test Data</td>
                    <td>Test Data 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

关键逻辑说明 #

• 将<tbody>设为display: block后，它可以独立设置高度和滚动属性，不再受表格整体布局的强制填充规则影响。
• 给<tr>设置display: table和table-layout: fixed，保证表头和内容行的列宽完全对齐，避免滚动时出现错位。
• height: fit-content直接强制行高由单元格内容决定，彻底杜绝拉伸填充多余空间的问题。

内容的提问来源于stack exchange，提问作者Basil