我有一个包含5列的表,其中一列包含一些非常长的用户ID(没有空格).它不是裁剪文本,而是扩展列以适合所有文本,将其他列推到右侧并显示滚动条.

The column is expanding to fit the long user ID

我已经这样做了几个小时,试图弄清楚如何固定宽度并阻止它溢出.我试着在MudTable元素上将table-layout属性设置为fixed,并在我能想到的任何东西上try width:20%; word-wrap:break-word; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;的变体,例如col,MudTd等等,但都没有起到任何作用,甚至没有任何效果.

文档似乎根本没有涵盖溢出,这很令人沮丧.在数据变得太长之前,设置col宽度效果很好,而设置max-width也无济于事.

这似乎是MudTable应该处理的事情,有谁能告诉我我做错了什么,或者建议修复吗?

这是我的桌子:

    <MudTable id="resultlayui-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 snippet

Css相关问答推荐

使用tailwind 将父div限制为其具有溢出的最短子级的高度

弹性布局溢出时的换行符

做一个像CodeSandbox的console那样的可拖拽的split panel

图像占用尽可能多的空间但保持宽高比并包含在窗口高度中

用css重复表格边框

CSS Slanding Div 边缘在图像上

使用 display:inline-block 渲染多行文本组件,行间有白色间隙

基于变量动态生成 CSS 类 - SCSS

在移动设备上touch 屏幕边缘的元素(Material UI)

您如何设置 Google Places Autocomplete API 的下拉菜单样式?

HTML 元素默认为 display:inline-block?

如何强制显示垂直滚动条?

表格溢出时水平滚动

完成后如何防止css3动画重置?

为什么浏览器会为 CSS 属性创建供应商前缀?

在 CSS 中使用多个 @font-face 规则

CSS 中的星号属性是什么意思?

为什么只为第一个元素显示双引号?

行高百分比不起作用

谷歌的无图像按钮