如何根据tbody的高度应用CSS样式

嗨，我来帮你搞定这个需求！你之前用容器查询给div做的高度触发样式逻辑没问题，但tbody有点特殊——它默认的display值是table-row-group，这种表格相关的显示类型没法直接作为size类型的容器来用，得先调整一下它的属性才行。

下面是适配tbody的完整实现方案，我给你拆解说清楚：

• 首先，我们需要给tbody设置合适的display属性（比如block），让它能成为一个可以被容器查询识别的独立容器；同时可以加上overflow-y: auto，这样当内容超出tbody高度时会出现滚动条，方便我们测试不同高度下的样式变化。
• 然后和你之前给div设置的一样，给tbody加上container-type: size和自定义的容器名称。
• 最后编写容器查询规则，指定当tbody高度小于400px时要应用的样式。

完整的代码示例如下：

<html>
    <head>
        <style>
            /* 给表格容器设置基础样式，控制tbody的高度范围 */
            .table-container {
                width: 300px;
                height: 500px;
                border: 1px solid #ccc;
            }

            /* 关键：调整tbody的显示属性，让它成为可用的容器 */
            .table-container tbody {
                display: block;
                height: 100%;
                overflow-y: auto;
                /* 设置容器查询相关属性 */
                container-type: size;
                container-name: table-body;
            }

            /* 让表头固定，不随tbody滚动（可选，按需保留） */
            .table-container thead {
                display: table;
                width: 100%;
            }

            /* 保持tbody内表格行的布局完整性 */
            .table-container tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }

            /* 容器查询：当tbody高度小于400px时触发样式 */
            @container table-body (max-height: 400px) {
                .table-container tbody tr:first-child {
                    background: green;
                }
            }
        </style>
    </head>
<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>标题1</th>
                    <th>标题2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                </tr>
                <tr>
                    <td>内容3</td>
                    <td>内容4</td>
                </tr>
                <!-- 可添加更多行测试高度变化效果 -->
                <tr>
                    <td>内容5</td>
                    <td>内容6</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

这里有几个小细节要注意：

• 如果你不需要表头固定的效果，可以删掉thead相关的样式；
• 你可以直接给tbody设置固定高度（比如height: 300px），代替继承外层容器的高度，来快速测试样式触发逻辑；
• 调整外层.table-container的高度，当tbody高度小于400px时，第一行的背景色就会变成绿色啦。

备注：内容来源于stack exchange，提问作者TwentySix