Bagaimana untuk menghalang lajur Mud Blazor MudTable daripada mengembang agar sesuai dengan teks

Question

Saya mempunyai jadual dengan 5 lajur, satu daripadanya mengandungi beberapa ID pengguna yang sangat panjang (tanpa ruang). Daripada memotong teks, ia mengembangkan lajur untuk menampung semua kandungan, menolak lajur lain ke kanan dan menyebabkan bar skrol muncul.

Saya telah meneliti selama berjam-jam cuba memikirkan cara untuk menetapkan lebar dan menghentikannya daripada melimpah. Saya cuba menambah MudTable 元素上的 table-layout 属性设置为 fixed ，并尝试使用 width:20%; 的变体；自动换行：换行；空白：nowrap；溢出：隐藏； text-overflow: ellipsis; 在我能想到的任何内容上，例如 col MudTd dsb. tetapi tidak berjaya, malah tidak.

Dokumentasi nampaknya tidak menutup limpahan langsung, yang mengecewakan. Tetapan col 宽度效果很好，直到数据变得太长，并且设置 max-width juga tidak membantu.

Ini nampaknya merupakan isu dalam MudTable yang harus ditangani, bolehkah sesiapa memberitahu saya apa yang saya lakukan salah, atau mencadangkan pembetulan?

Ini meja saya:

<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>

Terima kasih banyak-banyak.

Answer 1

Cuba ini. overflow-wrap:break-word;max-width:200px; Di talian anda.

Atas sebab tertentu, max-width 需要设置为 > 0 值，但您可以在 ColGroup mengawal lebar lajur dalam gaya.

<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>

coretan kod mudblazor