基于剩余高度的Blazorise可滚动固定表头表尾表格实现

要实现自适应组件剩余高度的固定表头表格，核心是利用父容器的高度约束配合Blazorise表格的FixedHeaderTableMaxHeight属性，而非依赖不支持calc()的FixedHeaderTableHeight。以下是具体实现方案：

关键要点 #

• 父容器通过calc()计算可用高度：如果页面存在固定顶部Header和底部Footer，父容器高度可设为calc(100vh - 顶部Header高度 - 底部Footer高度)，让表格自动适配剩余视口空间。
• 重置FixedHeaderTableMaxHeight默认值：Blazorise固定表头表格的默认max-height为300px，会限制表格最大高度，必须显式将其设为100%，让表格能填满父容器的可用高度。
• 无需设置FixedHeaderTableHeight：自适应场景下，固定高度属性会限制表格的自适应能力，直接依赖max-height即可。

调整后的代码示例 #

<Container Position="Position.Fixed.Top" Style="height:50px;">
    Header
</Container>

<div style="border-style:solid; height:calc(100vh - 100px); overflow:hidden;">
    <Table Bordered FixedHeader FixedHeaderTableMaxHeight="100%" Style="overflow:auto;">
        <TableHeader>
            <TableRow>
                <TableHeaderCell Width="@Width.Px(50)">#</TableHeaderCell>
                <TableHeaderCell Width="@Width.Px(100)">Column 1</TableHeaderCell>
                <TableHeaderCell Width="@Width.Px(150)">Column 2</TableHeaderCell>
                <TableHeaderCell Width="@Width.Px(100)">Column 3</TableHeaderCell>
                <TableHeaderCell Width="@Width.Px(450)">Column 4</TableHeaderCell>
                <TableHeaderCell Width="@Width.Px(230)">Column 5</TableHeaderCell>
                <TableHeaderCell Width="@Width.Px(220)">Column 6</TableHeaderCell>
                <TableHeaderCell Width="@Width.Px(200)">Column 7</TableHeaderCell>
            </TableRow>
        </TableHeader>
        <TableBody>
            @for (int i = 1; i <= 30; ++i) {
                var index = i.ToString();

                <TableRow @key="@index">
                    <TableRowHeader Width="@Width.Px(50)">@index</TableRowHeader>
                    <TableRowCell Width="@Width.Px(100)">Column 1</TableRowCell>
                    <TableRowCell Width="@Width.Px(150)">Column 2</TableRowCell>
                    <TableRowCell Width="@Width.Px(200)">Column 3</TableRowCell>
                    <TableRowCell Width="@Width.Px(450)">Column 3</TableRowCell>
                    <TableRowCell Width="@Width.Px(230)">Column 4</TableRowCell>
                    <TableRowCell Width="@Width.Px(220)">Column 5</TableRowCell>
                    <TableRowCell Width="@Width.Px(200)">Column 6</TableRowCell>
                </TableRow>
            }
        </TableBody>
    </Table>
</div>

<Container Position="Position.Fixed.Bottom" Style="height:50px;">
    Footer
</Container>

对原有困惑的解释 #

你提到设置FixedHeaderTableHeight超过300px时必须调整FixedHeaderTableMaxHeight，原因是Blazorise给固定表头表格默认设置了max-height:300px，这个默认值会优先限制表格高度——即便设置了更大的height，表格也不会突破max-height的限制。如果要使用固定高度，需要把FixedHeaderTableMaxHeight设为比height更大的值；但自适应场景下，直接将FixedHeaderTableMaxHeight设为100%，让表格跟随父容器高度变化即可。

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