I Want my MudSimpleTable Layout to be Static-Non Changing

Question

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?

Answer 1

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>

MudBlazor snippet demo

Answer 2

I Fixed it using Css by adding div tag above MudsimpleTable

<style>
    .table-container2 {
        overflow-x: auto;
    }
    .table-container2 table {
        table-layout: fixed;
        width: 100%;
    }
    .table-container2 th,
    .table-container2 td {
        overflow: hidden;
        word-wrap: break-word;
        white-space: normal;
    }
</style>
<div class="table-container2"> <MudSimpleTable..../> </div>

MudBlazor Snippet Demo