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

【问题标题】：How to adjust the column width of a table in MudBlazor如何在 MudBlazor 中调整表格的列宽
【发布时间】：2021-02-10 21:25:18
【问题描述】：

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 但不起作用。感谢您的帮助。

【问题讨论】：

标签： blazor mudblazor

【解决方案1】：

有可能，colgroup 是由贡献者添加到 MudBlazor 的，并且是 documented here。你的代码看起来像这样：

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

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

【讨论】：

我在 colgroup 元素上收到一个错误。错误 RZ9996：组件“MudTable”内的子内容无法识别。组件“MudTable”通过以下顶级项接受子内容：“RowTemplate”、“ChildRowContent”、“RowEditingTemplate”、“ToolBarContent”、“HeaderContent”、“ColGroup”、“PagerContent”。 (68, 9)
我将 Style 值添加到 MudTh 元素，它就这样工作了。我猜这是在您的原始帖子之后添加的。

【解决方案2】：

不要使用Style，而是使用Class

<MudTd Class="clm-row-small"

【讨论】：

你能为后代解释一下Style和Class的区别吗？