我有一個(gè)包含 5 列的表,其中一列包含一些非常長(zhǎng)的使用者 ID(沒(méi)有空格)。它不是將文字剪掉,而是展開(kāi)該列以容納所有內(nèi)容,將其他列推到右側(cè)並導(dǎo)致出現(xiàn)捲軸。
我已經(jīng)研究了幾個(gè)小時(shí),試圖找出如何修復(fù)寬度並阻止其溢出。我嘗試將MudTable
元素上的table-layout
屬性設(shè)為fixed
,並嘗試使用width:20%; 的變體;自動(dòng)換行:換行;空白:nowrap; 溢出:隱藏;text-overflow: ellipsis;
在我能想到的任何內(nèi)容上,例如col
MudTd
等,但沒(méi)有任何效果,甚至沒(méi)有任何效果。
文件似乎根本沒(méi)有涵蓋溢出,這令人沮喪。設(shè)定 col
寬度效果很好,直到資料變得太長(zhǎng),設(shè)定 max-width
也沒(méi)有幫助。
這似乎是 MudTable 中應(yīng)該滿足的問(wèn)題,任何人都可以告訴我我做錯(cuò)了什麼,或建議修復(fù)嗎?
這是我的桌子:
<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>
非常感謝。
試試這個(gè)。 overflow-wrap:break-word;max-width:200px;
在您的行上。
由於某種原因,max-width
需要設(shè)定為 > 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>