CSS is not working Blazor MudTable Inline edit

Question

Hi,

i have added a mudtable with inline edit and delete function.Problem is when i am clicking the second row for editing un edited row and header jumping to left side.How can i fix these CSS? .I need to make un editable row and header freez while inline edit is activated. Below is my code   <ColGroup/> i am added CSS .How can i fix this CSS issue?

@inject ISnackbar Snackbar

<MudTable @ref=@table
          T="Element"
          Items="@elements"
          Hover="true"
          SortLabel="Sort By"
          OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))"
          RowEditPreview="BackupItem"
          RowEditCancel="ResetItemToOriginalValues"
           CanCancelEdit="@canCancelEdit"
          CommitEditIcon=""
          SelectedItemChanged="OnSelectedItemChanged">z

//css for table edit inline coming here
   <ColGroup>
        @if (applyButtonPosition.DisplayApplyButtonAtStart() || (editButtonPosition.DisplayEditButtonAtStart() && editTrigger == TableEditTrigger.EditButton))
        {
            <col style="width:50px;" />  
        }
       
        <col />
        <col />
        <col style="width:50%;" />
       
       
        @if (applyButtonPosition.DisplayApplyButtonAtEnd() || (editButtonPosition.DisplayEditButtonAtEnd() && editTrigger == TableEditTrigger.EditButton))
        {
         
            <col style="width:88px;" />
        }

    </ColGroup>

    <HeaderContent>
        
        <MudTh>Nr</MudTh>
        <MudTh>Name</MudTh>
        <MudTh></MudTh>
    </HeaderContent>
    <RowTemplate>
       
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
   <MudTd DataLabel="Delete" Class="mud-table-cell-align-right mud-typography-nowrap">
        <MudIconButton Icon="@Icons.Material.Filled.Delete"
         Variant="Variant.Outlined" Color="Color.Error" Size="Size.Small" />
        </MudTd>
    </RowTemplate>
    <RowEditingTemplate>
       
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">
            <MudTextField @bind-Value="@context.Name" Required />
        </MudTd>
        <MudTd DataLabel="Age">
            <MudNumericField @bind-Value="@context.Age" Required />
        </MudTd>
    </RowEditingTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>

@code {
     private TableApplyButtonPosition applyButtonPosition = TableApplyButtonPosition.End;
    private TableEditButtonPosition editButtonPosition = TableEditButtonPosition.End;
    private TableEditTrigger editTrigger = TableEditTrigger.RowClick;
       private bool canCancelEdit = true;
    private MudTable<Element> table;
    private Element elementBeforeEdit;
    private IEnumerable<Element> elements = new List<Element>();

    protected override void OnInitialized()
    {
        elements = GetData();
    }

    private void OnCommitEditButtonClicked(MouseEventArgs e)
    {
        table.RowEditCommit?.Invoke(table.SelectedItem);
        table.OnCommitEditClick.InvokeAsync(e);
        table.SetSelectedItem(null);
    }

    private void OnCancelEditButtonClicked(MouseEventArgs e)
    {
        table.RowEditCancel?.Invoke(table.SelectedItem);
        table.OnCancelEditClick.InvokeAsync(e);
        table.SetSelectedItem(null);
    }

    private void OnSelectedItemChanged(object element)
    {
        table.SetEditingItem(element);
    }

    private void BackupItem(object element)
    {
        elementBeforeEdit = new()
        {
            Name = ((Element)element).Name,
            Age = ((Element)element).Age,
        };
    }

    private void ResetItemToOriginalValues(object element)
    {
        ((Element)element).Name = elementBeforeEdit.Name;
        ((Element)element).Age = elementBeforeEdit.Age;
    }

    private IEnumerable<Element> GetData()
    {
        return new List<Element>()
        {
            new() { Number = 1, Name = "Peter Parker", Age = 16 },
            new() { Number = 2, Name = "Bruce Wayne", Age = 31 },
            new() { Number = 3, Name = "Clark Kent", Age = 31 },
            new() { Number = 4, Name = "Barry Allen", Age = 29 },
            new() { Number = 5, Name = "Tony Stark", Age = 52 },
        };
    }
    
    class Element
    {
        public int Number { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}