If you create a brand new Blazor Wasm App from the template in VS 17.10.5 using Net 8, add in the latest nugget MudBlazor package with the required setup, then replace the home page with:

@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" }
        
    };
}

It works as expected in normal layout, but when it breaks into mobile layout, the table is only taking up a small portion of the width of the container, like this:

If I take the exact same code and put it in try.mudblazor.com it works as expected:

There is no css isolation, no additional style sheets – just a fresh new app with Mudblazor added. Could there be a problem with the css in the template?

I notice that MudBlazor is now recommending that you take out Bootstrap, so I’ve tried that and it still doesn’t work.

Any ideas on why this is happening and is there a fix for it?

Here is a snippet… https://try.mudblazor.com/snippet/mEwSYsYyeiLMGOlZ

Thanks in advance.