PrimeReact DataTable滚动表格双边框问题求助

滚动模式的DataTable表头底部出现粗边框，本质是表头容器与内容容器的边框叠加导致的视觉双边框效果，只需通过CSS调整即可实现单边框：

• 方案一：移除表头容器的底部边框

.p-datatable .p-datatable-scroll-header {
  border-bottom: none;
}

这样只保留内容容器的顶部边框，实现统一的单边框效果。

• 方案二：调整表头单元格的底部边框
  如果是表头单元格自带的边框和容器边框叠加，可直接去掉单元格的底部边框：

.p-datatable .p-datatable-scroll-header th {
  border-bottom: none;
}

将上述CSS代码添加到你的全局样式文件（比如index.css）或组件的内联样式中，即可解决表头底部边框过粗的问题。

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