我希望我的 MudSimpleTable 布局是静态的，不改变

Question

我的要求是希望我的表格布局是固定的。我的问题是，当我在下拉框中选择值时，表格列宽度根据下拉框中所选值的长度动态变化，但我希望我的 MudSimpleTable 布局是静态不变的。 我已经创建了我面临的问题的片段link。有谁知道如何解决吗？

Answer 1

对静态列的 td 上的最大宽度使用静态单位。例如。

max-width:1px;

该值只需为

> 0

并且您可以使用

ColGroup>col

来控制列的宽度。例如

<col style="width:30%;" />

我还建议使用预先存在的模板，例如

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 片段演示

Answer 2

我通过在 MudsimpleTable 上方添加 div 标签使用 Css 修复了它

<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 片段演示