我有一个有5列的表,其中一列包含一些很长的用户ID(没有空格)。它不是将文本剪切掉,而是将列扩展到适合所有文本,将其他列推到右侧并导致滚动条出现。
我已经花了几个小时来解决这个问题,试图找出如何修复宽度并阻止它溢出。我试过在MudTable
元素上将table-layout
属性设置为fixed
,并在我能想到的任何东西上使用width:20%; word-wrap:break-word; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;
的变体,例如col
MudTd
等,但没有任何效果。
文档似乎根本没有涉及溢出,这是令人沮丧的。设置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>
多谢了。
1条答案
按热度按时间hkmswyz61#
在你的行上试试这个.
overflow-wrap:break-word;max-width:200px;
。出于某种原因,
max-width
需要设置为〉0的值,但您可以在ColGroup
样式中控制列的宽度。mudblazor snippet