Comment empêcher les colonnes Mud Blazor MudTable de s'étendre pour s'adapter au texte

Question

J'ai un tableau avec 5 colonnes, dont une contient des identifiants utilisateur très longs (sans espaces). Au lieu de couper le texte, il agrandit la colonne pour accueillir tout le contenu, poussant les autres colonnes vers la droite et faisant apparaître des barres de défilement.

J'ai fait des recherches pendant des heures pour essayer de trouver comment régler la largeur et l'empêcher de déborder. J'ai essayé d'ajouter MudTable 元素上的 table-layout 属性设置为 fixed ，并尝试使用 width:20%; 的变体；自动换行：换行；空白：nowrap；溢出：隐藏； text-overflow: ellipsis; 在我能想到的任何内容上，例如 col MudTd etc. mais rien n'a fonctionné, même pas ça.

La documentation ne semble pas du tout couvrir le débordement, ce qui est frustrant. Le réglage col 宽度效果很好，直到数据变得太长，并且设置 max-width n’aide pas non plus.

Cela semble être un problème dans MudTable qui devrait être résolu, quelqu'un peut-il me dire ce que je fais de mal ou suggérer une solution ?

Voici ma 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>

Merci beaucoup.

Answer 1

Essayez ceci. overflow-wrap:break-word;max-width:200px; Sur votre ligne.

Pour une raison quelconque, max-width 需要设置为 > 0 值，但您可以在 ColGroup contrôle la largeur de la colonne dans le style.

<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>

extrait de code mudblazor