如何在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，但不起作用。谢谢你的帮助。

Answer 1

colgroup可能是由一个贡献者添加到MudBrazor中的，并在此处进行了记录。你的代码看起来像这样：

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