如何在 MudBlazor 中调整 table 的列宽

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>

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

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

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

Answer 2

而不是使用 Style 使用 Class

<MudTd Class="clm-row-small"

如何在 MudBlazor 中调整 table 的列宽

How to adjust the column width of a table in MudBlazor

blazor

mudblazor