如何让MudTable中的多行表头在滚动时固定在顶部？

你的问题出在MudTable默认的FixedHeader逻辑只对最后一行表头应用了固定定位，要让两行都固定，需要通过自定义CSS来实现：

步骤1：修改组件代码，给两行表头添加自定义类名 #

<MudTable Height="200px" CustomHeader="true" FixedHeader="true">
  <HeaderContent>
     <MudTHeadRow Class="sticky-header-row first-header">
         <MudTh Class="fw-bold lh-1 border" colspan="1">A</MudTh>
     </MudTHeadRow>
     <MudTHeadRow Class="sticky-header-row second-header">
        <MudTh Class="fw-bold lh-1 border" colspan="1">B</MudTh>
     </MudTHeadRow>
  </HeaderContent>
  <!-- 此处补充你的TableContent内容 -->
</MudTable>

步骤2：添加自定义CSS样式 #

.sticky-header-row {
  position: sticky;
  z-index: 10; /* 确保表头始终在内容上方 */
  background-color: white; /* 匹配你的主题背景色，避免内容透显 */
}

.first-header {
  top: 0; /* 第一行固定在视窗顶部 */
}

.second-header {
  top: 38px; /* 数值需等于第一行表头的实际高度，可根据你的样式调整 */
}

说明 #

• 给两行表头都设置position: sticky，并分别指定top值：第一行固定在top:0，第二行的top值设为第一行的高度，确保滚动时第二行紧跟第一行下方固定。
• 设置background-color是为了防止表格内容滚动时透过表头显示，颜色需与页面主题保持一致。
• z-index用于提升表头层级，避免被表格内容遮挡。

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