相关疑难解决方法(0)

我想要一个固定宽度的表,有1个小列和2个大列,如下所示:

|..|....|....|
|..|....|....|
|..|....|....|

运用

td.small { width: 20% }
td.large { width: 40% }

然后我想添加一个额外的大col与colspan = 2像这样

|.......|....|
|..|....|....|
|..|....|....|

运用

td.small { width: 20% }
td.large { width: 40% }
td.extralarge { width: 60% } /* 20+40=60 */

但我一直坚持:

|.......|....|
|...|...|....|
|...|...|....|

在jsbin上找到了一个更加图形化的例子

**编辑**

对不起,我错过了一个细节:我必须使用(或者我认为......？),table-layout: fixed因为我有一些特殊的溢出属性:

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

更新了jsbin在这里找到.

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