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.
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.extrait de code mudblazor