我有一个包含5列的表,其中一列包含一些非常长的用户ID(没有空格).它不是裁剪文本,而是扩展列以适合所有文本,将其他列推到右侧并显示滚动条.
我已经这样做了几个小时,试图弄清楚如何固定宽度并阻止它溢出.我试着在MudTable
元素上将table-layout
属性设置为fixed
,并在我能想到的任何东西上try width:20%; word-wrap:break-word; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;
的变体,例如col
,MudTd
等等,但都没有起到任何作用,甚至没有任何效果.
文档似乎根本没有涵盖溢出,这很令人沮丧.在数据变得太长之前,设置col
宽度效果很好,而设置max-width
也无济于事.
这似乎是MudTable应该处理的事情,有谁能告诉我我做错了什么,或者建议修复吗?
这是我的桌子:
<MudTable id="resultlayui-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>
非常感谢.