如何在 MudBlazor 中调整表格的列宽

2024-01-02

MudTable 组件真的很棒,看起来非常漂亮。但我想配置列宽。有可能吗?

<MudTable Items="@my_users">
    <HeaderContent>
    <MudTh>Nr</MudTh>
        <MudTh>Username</MudTh>
        <MudTh>Email</MudTh>
        <MudTh>Role</MudTh>
        <MudTh>Actions</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Nr</MudTd>
        <MudTd>@context.Username</MudTd>
        <MudTd>@context.Email</MudTd>
        <MudTd>@context.Role</MudTd>
        <MudTd>
       <MudButton @onclick="@(()=> OnEdit(@context))">Edit</MudButton>
        </MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{10, 25, 100}" />
    </PagerContent>
</MudTable>

问题是,所有列的列空间都是相同的。我想限制第一列和最后一列的宽度。我知道,我可以使用普通的 HTML 表格,但看起来不太好。 MudTable可以进行过滤和多选。 所以我知道 HTML 可以使用 colgroup 标签,但是如何应用 MudTable 呢?我尝试在 HeaderContent 中添加 colgroup 但不起作用。感谢帮助。


有可能,colgroup 是由贡献者添加到 MudBlazor 中的,并且是记录在这里 https://mudblazor.com/components/table。您的代码将如下所示:

  <MudTable Items="@my_users">
    <ColGroup>
        <col style="width: 60px;" />
        <col />
        <col />
        <col />
        <col style="width: 60px;"/>
    </ColGroup>
    <HeaderContent>
    <MudTh>Nr</MudTh>
        <MudTh>Username</MudTh>
        <MudTh>Email</MudTh>
        <MudTh>Role</MudTh>
        <MudTh>Actions</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Nr</MudTd>
        <MudTd>@context.Username</MudTd>
        <MudTd>@context.Email</MudTd>
        <MudTd>@context.Role</MudTd>
        <MudTd>
       <MudButton @onclick="@(()=> OnEdit(@context))">Edit</MudButton>
        </MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{10, 25, 100}" />
    </PagerContent>
</MudTable>

这限制了第一列和最后一列。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 MudBlazor 中调整表格的列宽 的相关文章

  • 如何使用 Blazor 组件访问当前路由

    我有一个 ASP dot NET Web 应用程序 它有一个简单的导航栏 我尝试使用 Blazor 组件 如果该页面恰好是活动页面 它将改变导航栏并增加左边框的宽度 到目前为止 我使用的是 switch 语句 该语句将根据字符串表示的当前页
  • Blazor:无法加载资源:服务器响应状态为 404 ()

    我很难理解我的 blazor 应用程序的问题所在 我有一个客户端 blazor 正在从 net 3 1 更新到 net 6 我已阅读有关从 3 1 迁移到 6 的说明 但是当我尝试调试它时 我的应用程序永远不会加载 它抛出 无法加载资源 服
  • 如何在 Blazor 中直接更改 css(不带变量)?

    我正在使用 Blazor 的服务器端 我想改变body的CSS 在 Jquery 中我可以轻松地编写这样的代码 body css overflow y hidden 但是 通过本教程 Blazor 更改验证默认 css 类名称 https
  • 如何在 @code 块内编写 Blazor HTML 代码?

    如何在 Blazor 内部的函数中编写 Blazor HTML 代码 code block 考虑以下代码 page Test if option 1 drawSomething Something else drawSomething So
  • Blazor 读取目录

    如何将内容目录读入 Blazor I tried Path Combine Directory GetCurrentDirectory posts 但这会引发错误 Uncaught in promise Error System IO Di
  • Blazor 本地化

    我尝试在 Blazor 应用程序中实现本地化 但在尝试通过视图中的键获取资源值时遇到一些问题 我怎样才能做到这一点 到目前为止 这是我的代码 启动 cs public void ConfigureServices IServiceColle
  • Blazor - 动态改变角色

    我有一个 blazor 应用程序 在页面中我使用以下代码根据当前用户角色显示一些部分
  • Blazor WebAssembly Visual Studio 调试器问题

    我创建了一个干净的 Blazor PWA 项目 当我尝试使用调试器运行它时 不到一半的时间它无法正确启动 一半的时间实际上会有所改善 如果尝试使用调试器 F5 或调试 开始调试 启动 则会打开一个新的浏览器窗口 其中 URL 为 about
  • 为 Blazor WASM 保存时重新编译 .razor 文件

    有没有办法让 Blazor WebAssembly 重新编译 razor文件更改 更新然后保存时 我已经习惯了这种情况在传统的 ASP NET Core MVC razor 视图以及客户端框架 如 Angular 中发生 在 ASP NET
  • Blazor 客户端 - 错误 NETSDK1082:“浏览器-wasm”

    我创建了一个简单的 blazor wa 项目 并选择了托管选项 在项目的客户端 它自动附带
  • 如何判断代码是否将在 Blazor 的客户端或服务器上运行?

    我是 Blazor 开发的新手 我可能在这里遗漏了一些明显的东西 但是搜索 google 阅读文档和搜索此网站并没有为我找到答案 出于安全原因 我需要确保一些代码在服务器端运行 例如散列密码 我知道 Blazor 通常会自动确定代码的运行位
  • 在 Blazor 中增加文本区域

    我需要一个随着行数增加而增长的文本区域 一旦行被删除 TextArea 就会再次缩小 在最好的情况下具有最大高度 它如何与 Javascript 一起工作我已经可以在这里阅读 根据内容长度调整文本区域大小 https stackoverfl
  • 剃刀组件中的 C# StateHasChanged() 不会强制

    我正在尝试服务器端 blazor 我正在尝试使用多个按钮设置 更改在剃刀组件的标签中播放的 mp4 文件 我发现实现这项工作的唯一方法是通过 IJSRuntime InvokeVoidAsync 从我的 razor 组件中的 OnParam
  • 使用 Blazor 和 C# 刷新 html 表数据

    我有一种情况 我有一个 for 循环 它从我的数据模型创建我的 html 表 该数据模型从 SQL Server Express 获取数据 我想知道是否可以创建一个自动刷新方法 其中表数据仅刷新而不刷新整个页面 如果没有 那么也许 OnCl
  • 有人可以解释 Blazor 组件标签的各种语法吗

    在我的 razor 文件中 我有这些标签 只是一个示例 它们有效 但我无法向自己解释各种语法背后的原因
  • 将 SQLite 与 Blazor WASM 结合使用有什么好处?

    我正在看这个Steve Sanderson 的视频演示了如何将 SQLite 与 Blazor Web Assembly 结合使用 https www youtube com watch v kesUNeBZ1Os我正在考虑在我的一个项目中
  • 状态存储在 Fluxor 中的哪里?

    我是与状态管理人员合作的新手 目前 我正在开发 blazor 应用程序 我偶然发现了 fluxor 框架 它允许通过 Flux 模式进行状态管理 Fluxor 对我来说工作得很好 但是我似乎无法弄清楚页面状态的实际存储位置 它是在缓存 数据
  • 在使用 Azure Active Directory 的 WASM Blazor 中,如何在开发过程中绕过身份验证

    Microsoft 在其演练中很好地介绍了根据 Azure Active Directory 对 WASM Blazor 进行身份验证 他们没有涵盖的是之后的开发工作流程 作为一个已编译的应用程序 对 UI 的每次更改都是一个痛苦的停止 重
  • 如何使用 Blazor 在 ASP.NET CORE 中更新数据库后刷新网页

    我正在制作一个小型房间预订网络应用程序 我希望在给定的时间间隔内刷新网页 即给定的一分钟或对数据库进行更改时 我发现StateHasChanged 但我真的不知道如何实现它 这里是新手一克诺比 我尝试将其放在将约会添加到日程表的函数中 va
  • Blazor 与 Razor

    随着 Blazor 的发明 我想知道这两种语言之间是否存在显着的效率 无论是在代码创建方面还是在代码的实际编译 执行方面 https github com SteveSanderson Blazor https github com Ste

随机推荐