当屏幕宽度变紧时，停止 MudBlazor 调整表格大小

Question

我有一个 MudBlazor 表，在调整窗口大小时它会不断执行此操作：

来自： 在此输入图片描述

致： 在此输入图片描述

我的代码：

<MudCard Elevation="0">
    <MudCardContent>
        <MudTable Style="background-color: #9d1213" Elevation="22" Class="py-8 px-10" Items="@rewards" Virtualize="true" Hover="true" SortLabel="Sort By">
            <HeaderContent>
                <MudTh Class="text-white"><MudTableSortLabel 
                    SortBy="new Func<Reward, object>(x=>x.Name)">Reward</MudTableSortLabel></MudTh>
                <MudTh Class="text-white"><MudTableSortLabel Enabled="@enabled" 
                    SortBy="new Func<Reward, object>(x=>x.HasBeenUsed)">Used ?</MudTableSortLabel></MudTh>
                <MudTh Class="text-white"><MudTableSortLabel InitialDirection="SortDirection.Ascending" 
                    SortBy="new Func<Reward, object>(x=>x.ExpiresOn)">Expires on</MudTableSortLabel></MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd Class="text-white" DataLabel="Name">@context.Name</MudTd>
                <MudTd Class="text-white" DataLabel="HasBeenUsed">@(context.HasBeenUsed == true ? "Yes" : "No")</MudTd>
                <MudTd Class="text-white" DataLabel="ExpiresOn">
                    @context.ExpiresOn.ToString("d", CultureInfo.CreateSpecificCulture("en-US"))
                </MudTd>
            </RowTemplate>
            <PagerContent>
                <MudTablePager Class="text-white" PageSizeOptions="new int[] { 10, 25, 50, 100 }" />
            </PagerContent>
        </MudTable>
    </MudCardContent>
</MudCard>

我对 CSS 的了解不够，或者不知道如何不让它做到这一点，我已经尝试了很多事情，从 MudBlazor 网站到 CSS 更改，但它没有做任何事情

Answer 1

您所体验的是移动版的表格。您可以通过将

Breakpoint

上的

MudTable

属性设置为

Breakpoint.None

来禁用表格自动切换到移动版本。这在默认表文档

中引用

通过将断点设置为 Breakpoint.None 可以防止表格闯入移动布局

这里是一个交互式示例。