Mudblazor Mudtable 布局未填充移动布局中的宽度

Question

如果您使用 Net 8 从 VS 17.10.5 中的模板创建全新的 Blazor Wasm 应用程序，请添加具有所需设置的最新块 MudBlazor 包，然后将主页替换为：

@page "/"

@using MudBlazor

<MudTable Items="@tableData" T="TableData" Striped="true">
    
    <ColGroup>
        <col style="width: 20%"/>
        <col style="width: 15%" />
        <col style="width: 15%" />
        <col style="width: 15%" />
        <col style="width: 15%" />
        <col style="width: 20%" />
    </ColGroup>
    <HeaderContent>
        <MudTh>Column 01</MudTh>
        <MudTh>Column 02</MudTh>
        <MudTh>Column 03</MudTh>
        <MudTh>Column 04</MudTh>
        <MudTh>Column 05</MudTh>
        <MudTh>Column 06</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Column1">@context.Column1</MudTd>
        <MudTd DataLabel="Column2">@context.Column2</MudTd>
        <MudTd DataLabel="Column3">@context.Column3</MudTd>
        <MudTd DataLabel="Column4">@context.Column4</MudTd>
        <MudTd DataLabel="Column5">@context.Column5</MudTd>
        <MudTd DataLabel="Column6">@context.Column6</MudTd>
        
    </RowTemplate>
    
</MudTable>



@code{
    private class TableData
    {
        public string Column1 { get; set; } = string.Empty;
        public string Column2 { get; set; } = string.Empty;
        public string Column3 { get; set; } = string.Empty;
        public string Column4 { get; set; } = string.Empty;
        public string Column5 { get; set; } = string.Empty;
        public string Column6 { get; set; } = string.Empty;
    }


    private List<TableData> tableData = new()
    {
       new() { Column1 = "A1", Column2 = "A2", Column3 = "A3", Column4 = "A4", Column5 = "A5", Column6 = "A6" },
       new() { Column1 = "B1", Column2 = "B2", Column3 = "B3", Column4 = "B4", Column5 = "B5", Column6 = "B6" },
       new() { Column1 = "C1", Column2 = "C2", Column3 = "C3", Column4 = "C4", Column5 = "C5", Column6 = "C6" },
       new() { Column1 = "D1", Column2 = "D2", Column3 = "D3", Column4 = "D4", Column5 = "D5", Column6 = "D6" },
       new() { Column1 = "E1", Column2 = "E2", Column3 = "E3", Column4 = "E4", Column5 = "E5", Column6 = "E6" },
       new() { Column1 = "F1", Column2 = "F2", Column3 = "F3", Column4 = "F4", Column5 = "F5", Column6 = "F6" },
       new() { Column1 = "G1", Column2 = "G2", Column3 = "G3", Column4 = "G4", Column5 = "G5", Column6 = "G6" }
        
    };
}

它在正常布局中按预期工作，但是当它进入移动布局时，表格仅占用容器宽度的一小部分，如下所示：

如果我采用完全相同的代码并将其放入 try.mudblazor.com 中，它会按预期工作：

没有 CSS 隔离，没有额外的样式表 - 只是添加了 Mudblazor 的全新应用程序。 会不会是模板中的css有问题？

我注意到 MudBlazor 现在建议您删除 Bootstrap，所以我已经尝试过，但仍然不起作用。

关于为什么会发生这种情况有什么想法吗？有解决办法吗？

这是一个片段... https://try.mudblazor.com/snippet/mEwSYsYyeiLMGOlZ

Answer 1

这是表的默认行为，如文档中所示。
如果您不希望出现此行为，则需要将

Breakpoint

参数设置为

Breakpoint.None

。

<MudTable Items="@tableData" T="TableData" Breakpoint="Breakpoint.None" Striped>