My requirement is want my table layout to be fixed. My problem is When I select value in dropdown box,Table column width dynamically changes according to length of selected value in dropdownbox but I want my MudSimpleTable Layout to be static non changing. I have created snippet link of my problem I am facing. Do anyone know how to fix it?
Use static units for max-width on the td for the static column. E.g. max-width:1px;
the value just needs to be > 0
and you use the ColGroup>col
to control the width of the column. e.g. <col style="width:30%;" />
I'd also recommend using the preexisting templates such as MudTd
,MudTh
.
<MudTable Items="@Elements">
<ColGroup>
<col style="width: 60px;" />
<col />
<col style="width:30%;" />
<col style="width: 60%;" />
<col style="width: 60px;" />
<col />
</ColGroup>
<HeaderContent>
<MudTh>Nr</MudTh>
<MudTh>Sign</MudTh>
<MudTh>Name</MudTh>
<MudTh>Position</MudTh>
<MudTh Style="text-align:center">Molar mass</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Sign</MudTd>
<MudTd Style="max-width:1px;">
<MudSelect T="LookupItem" Variant="Variant.Filled" Clearable="true" @bind-Value="selectedLookupItem">
@foreach (var lup in lookups)
{
<MudSelectItem T="LookupItem" Value="lup">@lup.LookupDisplayValue</MudSelectItem>
}
</MudSelect>
</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Position">@context.Position</MudTd>
<MudTd DataLabel="Molar mass" Style="text-align:right">@context.Molar</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager />
</PagerContent>
</MudTable>