MudTable中MudTh跨行合并功能失效问题求助

问题场景 #

我用MudBlazor制作年假卡片表格，先通过原生HTML实现了带rowspan/colspan的复合表头效果，但迁移到MudTable后，表头无法正确适配布局，出现列宽错乱的问题。

原生HTML预期效果代码 #

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

<table style="width:100%">
    <tr>
        <th rowspan="2">FROM</th>
        <th rowspan="2">TO</th>
        <th rowspan="2">NO OF DAYS/HRS REQUESTED</th>
        <th rowspan="1" colspan="2">NO OF DAYS/HRS REMAINING</th>
        <th rowspan="2">CONFIRMED</th>
    </tr>
    <tr>
        <td></td>
        <td>LSA</td>
    </tr>
    <tr>
        <td>1st April</td>
        <td>3rd April</td>
        <td>3</td>
        <td>12</td>
        <td></td>
        <td>Approved - JP</td>
    </tr>
</table>

问题代码（MudTable） #

<MudTable Items="@Events" Dense="true" Hover="true" Bordered="true" CanCancelEdit="true" IsEditRowSwitchingBlocked="true"
          RowEditPreview="SetBackupItem" RowEditCancel="ResetItemToOriginalValues" RowEditCommit="ItemHasBeenCommitted" 
          ApplyButtonPosition="TableApplyButtonPosition.End" EditButtonPosition="TableEditButtonPosition.End" EditTrigger="TableEditTrigger.EditButton" HeaderClass="table-head-bordered">

    <HeaderContent>
        <MudTHeadRow>
            <MudTh rowspan="2">FROM</MudTh>
            <MudTh rowspan="2">TO</MudTh>
            <MudTh rowspan="2">NO OF DAYS/HRS REQUESTED</MudTh>
            <MudTh colspan="2">NO OF DAYS/HRS REMAINING</MudTh>
            <MudTh rowspan="2">CONFIRMED</MudTh>
        </MudTHeadRow>

        <MudTHeadRow>
            <MudTh>.</MudTh>
            <MudTh>LSA</MudTh>
        </MudTHeadRow>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.From.ToShortDateString()</MudTd>
        <MudTd DataLabel="Sign">@context.To.ToShortDateString()</MudTd>
        <MudTd DataLabel="Name">@context.TimeRequested</MudTd>
        <MudTd DataLabel="Position">@context.TimeRemaining</MudTd>
        <MudTd DataLabel="Position">@context.TimeRemaining</MudTd>
        <MudTd DataLabel="Molar mass">@context.IsConfirmed</MudTd>
    </RowTemplate>
    <RowEditingTemplate>
        <MudTd DataLabel="Sign">
            <MudTextField @bind-Value="@context.From" Required />
        </MudTd>
        <MudTd DataLabel="Name">
            <MudTextField @bind-Value="@context.To" Required />
        </MudTd>
      
    </RowEditingTemplate>

    <EditButtonContent Context="button">
        <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" Class="pa-0" OnClick="@button.ButtonAction" Disabled="@button.ButtonDisabled" />
    </EditButtonContent>
</MudTable>

问题效果 #

解决步骤 #

1. 补全表头行的空列占位 #

MudTable要求表头的每一行列数必须和数据行一致，第二个MudTHeadRow需要为跨两行的表头补充空占位：

<MudTHeadRow>
    <MudTh></MudTh> <!-- 对应FROM列的占位 -->
    <MudTh></MudTh> <!-- 对应TO列的占位 -->
    <MudTh></MudTh> <!-- 对应NO OF DAYS/HRS REQUESTED列的占位 -->
    <MudTh>.</MudTh>
    <MudTh>LSA</MudTh>
    <MudTh></MudTh> <!-- 对应CONFIRMED列的占位 -->
</MudTHeadRow>

2. 强制表格布局样式 #

添加自定义CSS确保表格宽度100%且边框合并：

<MudTable ... Class="custom-leave-table">

.custom-leave-table table, 
.custom-leave-table th, 
.custom-leave-table td {
    width: 100% !important;
    border-collapse: collapse !important;
}

3. 补全编辑模板的列数 #

RowEditingTemplate的列数要和数据行保持一致，避免编辑时布局错乱：

<RowEditingTemplate>
    <MudTd DataLabel="Sign">
        <MudTextField @bind-Value="@context.From" Required />
    </MudTd>
    <MudTd DataLabel="Name">
        <MudTextField @bind-Value="@context.To" Required />
    </MudTd>
    <MudTd></MudTd>
    <MudTd></MudTd>
    <MudTd></MudTd>
    <MudTd></MudTd>
</RowEditingTemplate>

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