如何调整MudBlazor表格的列宽

Question

如何调整MudBlazor表格的列宽

9

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，但没有效果。谢谢帮忙。

- user14535297

2个回答

1

不要使用Style，而是使用Class

<MudTd Class="clm-row-small"

- P2A3W4E5

4

你能否解释一下“Style”和“Class”的区别，以便未来的世代能够理解？ - Simas Joneliunas

样式是纯CSS标签，类是预配置的CSS实用程序（类似于Bootstrap）。 - Leandro Toloza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- henon · Accepted Answer

有可能，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>

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