MudBlazor三级表头示例单元格对齐异常求助

我的实现基于MudBlazor的表头与页脚示例，核心问题是数据单元格和表头叶子单元格完全不对齐，比如数据单元格R1 -1.1没在表头1.1正下方，R1 - 1.2.1也没对应到表头1.2.1下方。用纯HTML实现相同结构的表格是可以正常对齐的，我试过设置五列等宽，但没有效果。

我的代码如下：

@page "/plaintable"
@using MudBlazor

<MudTable T="int"
            Items="Enumerable.Range(1, 50)"
            FixedHeader="false"
            Class="tree-table"
            Hover="true" Breakpoint="Breakpoint.Sm" Striped="true" Bordered="true"
            CustomHeader="true">

        <!-- Multi-level header -->
        <HeaderContent>
            <!-- Row 0 -->
            <MudTHeadRow Class="header-centered">
                <MudTh ColSpan="5">1</MudTh>
            </MudTHeadRow>
        <!-- Row 1 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="3">1.1</MudTh>
                <MudTh ColSpan="4">1.2</MudTh>
            </MudTHeadRow>
            <!-- Row 2 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="2">1.2.1</MudTh>
                <MudTh ColSpan="2">1.2.2</MudTh>
                <MudTh RowSpan="2">1.2.3</MudTh>
            </MudTHeadRow>
        <!-- Row 3 -->
            <MudTHeadRow>
                <MudTh>1.2.2.1</MudTh>
                <MudTh>1.2.2.2</MudTh>
            </MudTHeadRow>
        </HeaderContent>

        <!-- Body rows -->
        <RowTemplate>
            <MudTr>
            <MudTd>@($"R{context} - 1.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.2")</MudTd>
            <MudTd>@($"R{context} - 1.2.3")</MudTd>
            </MudTr>
        </RowTemplate>
    </MudTable>

<style type="text/css">
    .mud-table-head .header-centered th {
        text-align: center;
        font-size: 1.2em;
    }

    .mud-table-cell {
        font-weight: 500;
    }
</style>

@code { }

这个问题的根源是MudBlazor表格默认对表头和tbody采用不同布局逻辑，开启CustomHeader后，需要强制表格使用原生HTML表格的布局规则，具体解决步骤如下：

• 添加CSS强制固定表格布局
  在样式块中添加以下代码，让浏览器根据表头的列宽规则渲染整个表格，确保表头与数据列对齐：

.tree-table {
    table-layout: fixed !important;
}

• 禁用自动排序列（可选）
  如果MudTable自动添加排序列，会打乱列数匹配，可设置Sortable="false"禁用该功能，避免额外列干扰对齐。

修改后的完整代码：

@page "/plaintable"
@using MudBlazor

<MudTable T="int"
            Items="Enumerable.Range(1, 50)"
            FixedHeader="false"
            Class="tree-table"
            Hover="true" Breakpoint="Breakpoint.Sm" Striped="true" Bordered="true"
            CustomHeader="true"
            Sortable="false">

        <!-- Multi-level header -->
        <HeaderContent>
            <!-- Row 0 -->
            <MudTHeadRow Class="header-centered">
                <MudTh ColSpan="5">1</MudTh>
            </MudTHeadRow>
        <!-- Row 1 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="3">1.1</MudTh>
                <MudTh ColSpan="4">1.2</MudTh>
            </MudTHeadRow>
            <!-- Row 2 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="2">1.2.1</MudTh>
                <MudTh ColSpan="2">1.2.2</MudTh>
                <MudTh RowSpan="2">1.2.3</MudTh>
            </MudTHeadRow>
        <!-- Row 3 -->
            <MudTHeadRow>
                <MudTh>1.2.2.1</MudTh>
                <MudTh>1.2.2.2</MudTh>
            </MudTHeadRow>
        </HeaderContent>

        <!-- Body rows -->
        <RowTemplate>
            <MudTr>
            <MudTd>@($"R{context} - 1.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.2")</MudTd>
            <MudTd>@($"R{context} - 1.2.3")</MudTd>
            </MudTr>
        </RowTemplate>
    </MudTable>

<style type="text/css">
    .mud-table-head .header-centered th {
        text-align: center;
        font-size: 1.2em;
    }

    .mud-table-cell {
        font-weight: 500;
    }

    .tree-table {
        table-layout: fixed !important;
    }
</style>

@code { }

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