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

Question

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

标签： blazormudblazor

Answer 1

有可能，colgroup 是由贡献者添加到 MudBlazor 的，并在此处记录。你的代码看起来像这样：

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

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