如何阻止MudBlazor表格在屏幕宽度不足时自动调整尺寸

要阻止MudTable在窗口宽度变化时自动切换到堆叠/压缩布局，你可以通过以下几个关键调整来实现：

核心解决方案 #

1. 关闭响应式断点切换 #

给MudTable添加Breakpoint="Breakpoint.None"属性，这会完全禁用组件自带的响应式布局切换逻辑，让表格始终保持桌面端的横向布局。

2. 设置表格最小宽度 #

为表格指定一个MinWidth（比如MinWidth="700px"，可根据你的内容调整），防止窗口过窄时表格被过度挤压变形。

3. 添加横向滚动容器 #

给包裹表格的MudCardContent添加Class="overflow-x-auto"，当窗口宽度小于表格最小宽度时，会自动出现横向滚动条，保证表格内容完整可见。

修改后的完整代码 #

<MudCard Elevation="0">
    <MudCardContent Class="overflow-x-auto">
        <MudTable 
            Style="background-color: #9d1213" 
            Elevation="22" 
            Class="py-8 px-10" 
            Items="@rewards" 
            Virtualize="true" 
            Hover="true" 
            SortLabel="Sort By"
            Breakpoint="Breakpoint.None"
            MinWidth="700px"
        >
            <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组件样式优先级更高，优先使用组件自带属性配置更可靠。
• MinWidth的数值可根据表格内容长度灵活调整，确保所有列内容能正常显示。
• Breakpoint.None是关键属性，它会覆盖MudTable默认的断点设置，彻底关闭响应式堆叠行为。

内容的提问来源于stack exchange，提问作者Jimmy