Pandas大型DataFrame渲染的HTML样式在Chrome/Edge中无法全量显示的问题

复现环境 #

• 可稳定复现的版本组合：pandas v1.2.3/v1.2.4、Chrome v90.0.4430.93（64位正式版）、Edge v90.0.818.56（64位正式版）、JupyterLab v3.0.11、PyCharm 2021.1（专业版），操作系统为Windows 10，跨设备均可稳定复现问题

问题具体现象 #

• 对规模为474行×35列的DataFrame应用全量绿色背景样式时，无论在JupyterLab内嵌渲染、PyCharm控制台展示，还是将Styler渲染结果导出为独立HTML文件，均存在末尾5行样式丢失的问题
• 当DataFrame行/列规模进一步扩大时，样式丢失的行数会同步增长
• 已验证样式映射逻辑完全正确，仅当DataFrame缩减至471行×35列、或474行×34列时，所有行的样式可全量正常展示
• 交叉验证结果：同一份渲染结果在Firefox浏览器中打开（包括JupyterLab内嵌页、导出的独立HTML）可全量正常展示所有样式，仅Chrome、Edge等Chromium内核浏览器打开pandas渲染的HTML时存在样式不全问题
• 该问题已关联pandas官方bug报告#40913，提交时已附完整可复现代码

已验证的临时规避方案 #

• 拆分大型DataFrame为多个小尺寸分段，分别应用样式后再拼接渲染
• 将带样式的Styler结果导出为Excel文件进行展示

核心问题解答 #

1. 为何pandas渲染生成的HTML在Chrome、Edge浏览器中无法全量展示所有样式？ #

本质是旧版Chromium内核的单样式块长度截断机制，与pandas 1.2.x版本Styler的实现逻辑存在冲突：
pandas 1.2.x版本的Styler渲染大尺寸表格时，不会为每个单元格单独编写内联样式，而是会把所有单元格的样式规则统一汇总到单个<style>标签的CSS类中，通过给单元格绑定类名匹配对应样式。而对应版本的Chromium内核（v90）对单个<style>标签内的CSS规则总长度存在隐性截断阈值——当表格规模达到临界值，汇总后的CSS字符串长度超过阈值时，超出部分的规则会被内核直接丢弃，刚好对应表格末尾区域绑定的类名样式不会被解析渲染，最终表现为末尾行样式丢失。而Firefox不存在这类单style块的长度截断逻辑，因此同一份文件可以正常展示全部样式。

2. 是否存在更高效的pandas样式实现方案，可保证生成的HTML在Chrome、Edge浏览器中也能正常全量展示所有行的样式？ #

无需拆分DataFrame，可通过以下更高效的方式从根源规避问题：

• 调用Styler的set_table_styles方法时，可通过自定义配置css_class参数，将样式规则拆分为多个独立的小型CSS块，避免单个<style>块长度超过Chromium的截断阈值
• 对大表格场景，若不需要展示索引或冗余列，可通过hide_index()、hide_columns()方法减少无意义的样式规则生成量，压缩总CSS长度
• 升级pandas版本至1.3.0以上，该版本的Styler实现已针对Chromium的截断逻辑做适配，会自动拆分过长的style块，从根源解决该类问题

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