MudTable spanning MudTh across two rows doesn't work

I am making an annual leave card using a MudBlazor table.

To understand how the table SHOULD look like I have recreated it in HTML first:

 <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>

Applying the same logic to the MudBlazor table I end up with something that is not extending the proper length of the table. https://try.mudblazor.com/snippet/mkmyuoafGJdNgvIY

<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>

Any help is appreciated.

Solution

I guess MudTHeadRow doesn't work properly when you're spanning cells across two rows i.e. rowspan.

Decided to use colspan on the column that needs to be split up, then add css to create own grid to fit that column.

<style>
    .my-custom-row{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .top-row{
        grid-column: 1/3;
    }
    .bottom-row{
        border-bottom:0;
    }
</style>

<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>
            <MudTh >FROM</MudTh>
            <MudTh >TO</MudTh>
            <MudTh >NO OF DAYS/HRS REQUESTED</MudTh>
            <MudTh colspan="2" Style="color:green;padding:0;">
                <tr class="my-custom-row">
                    <th class="top-row mud-table-cell">
                        NO OF DAYS/HRS REMAINING
                    </th>
                    <th class="bottom-row mud-table-cell">
                        .
                    </th>
                    <th class="bottom-row mud-table-cell">
                        LSA
                    </th>
                </tr>
            </MudTh>
            <MudTh>CONFIRMED</MudTh>
    </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>

Demo 👉 MudBlazor Snippet](https://try.mudblazor.com/snippet/GYQoYyuqhueYeasO)