css 如何停止Mud Blazor MudTable列扩展以适应文本

kjthegm6  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(81)

我有一个有5列的表,其中一列包含一些很长的用户ID(没有空格)。它不是将文本剪切掉,而是将列扩展到适合所有文本,将其他列推到右侧并导致滚动条出现。

我已经花了几个小时来解决这个问题,试图找出如何修复宽度并阻止它溢出。我试过在MudTable元素上将table-layout属性设置为fixed,并在我能想到的任何东西上使用width:20%; word-wrap:break-word; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;的变体,例如colMudTd等,但没有任何效果。
文档似乎根本没有涉及溢出,这是令人沮丧的。设置col宽度工作得很好,直到数据变得太长,设置max-width也没有帮助。
这似乎是一些应该迎合在泥桌,谁能告诉我我做错了什么,或建议修复?
这是我的table

<MudTable id="results-table" ServerData="@(new Func<TableState, Task<TableData<HiHi1User>>>(LoadUsers))" RowsPerPage="50" FixedHeader=@_tableFixedHeader FixedFooter=@_tableFixedFooter
         Style="table-layout:fixed" Height=@_tableFixedHeight Hover="true" Striped="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Primary">
        <ColGroup>
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
        </ColGroup>
        <HeaderContent>
            <MudTh id="user-id-hdr">User ID</MudTh>
            <MudTh id="group-id-hdr">Group ID</MudTh>
            <MudTh id="current-versions-hdr">Current Version</MudTh>
            <MudTh id="max-versions-hdr">Max Version</MudTh>
            <MudTh id="can-alter-gnf-hdr">Can Alter Night Forwarding Status</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd id="user-id-val" DataLabel=@nameof(context.UserId)>@context.UserId</MudTd>
            <MudTd id="group-id-val" DataLabel=@nameof(context.GroupId)>@context.GroupId</MudTd>
            <MudTd id="current-versions-val" DataLabel=@nameof(context.CurrentVersion)>@context.CurrentVersion</MudTd>
            <MudTd id="max-versions-val" DataLabel=@nameof(context.MaxVersion)>@context.MaxVersion</MudTd>
            <MudTd id="can-alter-gnf-val" DataLabel=@nameof(context.CanAlterNightForwardingStatus)>@context.CanAlterNightForwardingStatus</MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager HorizontalAlignment="HorizontalAlignment.Left" HidePagination="false" />
        </PagerContent>
    </MudTable>

多谢了。

hkmswyz6

hkmswyz61#

在你的行上试试这个. overflow-wrap:break-word;max-width:200px;
出于某种原因,max-width需要设置为〉0的值,但您可以在ColGroup样式中控制列的宽度。

<RowTemplate>
    <MudTd DataLabel="Nr">@context.Number</MudTd>
    <MudTd DataLabel="Sign">@context.Sign</MudTd>
    <MudTd DataLabel="Name" Style="overflow-wrap:break-word;max-width:10px;">@context.Name</MudTd>
    <MudTd DataLabel="Position">@context.Position</MudTd>
    <MudTd DataLabel="Molar mass" Style="text-align:right">@context.Molar</MudTd>
</RowTemplate>

mudblazor snippet

相关问题