登录  /  注册
如何阻止 Mud Blazor MudTable 列扩展以适合文本
P粉212114661
P粉212114661 2023-12-27 11:05:27
[CSS3讨论组]

我有一个包含 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>

非常感谢。

P粉212114661
P粉212114661

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号