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