You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现Material UI DataGrid打印时每页表头不与内容重叠

Material UI DataGrid 打印表头重复显示及重叠问题求助

我在实现Material UI DataGrid的打印功能时,需要让表头在每页打印时都重复显示,但该组件默认不支持原生table的thead每页重复特性。目前遇到的问题是第二页的表头会和表格行重叠,效果如下:
打印时表头与表格行重叠

我已经尝试过以下几种解决方案,但都无法解决重叠问题:

  • 给表头设置固定样式:
    .MuiDataGrid-columnHeaders {
      display: table-header-group !important;
      position: fixed !important;
      top: 0 !important;
    }
    
  • 为表格行添加break-inside: avoid;样式
  • 在@media print规则中禁用iframe

我已经花了两天时间寻找解决办法,恳请各位提供帮助。可以通过沙箱测试复现该问题(点击右上角EXPORT按钮查看PRINT选项)。

内容的提问来源于stack exchange,提问作者manu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.03 17:40:40