在Chrome或Edge中，并非大数据框中的所有行都显示 pandas 样式 [英] pandas styling doesn't display for all rows in large dataframes in Chrome or Edge

查看：49 发布时间：2021/4/26 19:02:26 python css pandas google-chrome microsoft-edge

本文介绍了在Chrome或Edge中，并非大数据框中的所有行都显示 pandas 样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新2:

问题似乎出在Google Chrome和Microsoft Edge
Firefox中的Jupyter Lab可以正确显示所有样式行并正确呈现输出HTML文件.
更新的问题是
1. 为什么这不能在Chrome或Edge中使用?
2. 有没有更有效的方式来应用样式?

原文:

问题-它们是相互关联的:
1. 为什么不是所有行都以Jupyter或HTML格式显示背景样式?
  - 所有行都应具有绿色样式，但最后5行不显示样式.
2. 如何使所有行都显示背景样式?
给出一个大数据框，在这种情况下为 474行x 35列，所应用的样式将停止显示.
如果行数或列数增加到超过此大小，则不会显示更多行.
我们从样式图中可以看到，这些行已正确映射为背景色，但未显示出来.
如果减少行数或列数，则所有行均显示正确的样式.
在 jupyterlab v3.0.11
在 PyCharm 2021.1(专业版)内部版本#PY-211.6693.115(建于2021年4月6日中)中，将重新渲染的样式器保存到文件中具有相同的结果，所以这不仅仅是 jupyter 出现问题.
这个问题在我尝试过的两个不同的系统上都可以重现.
如果形状缩小为 471行×35列或 474行×34列，则所有行均正确显示突出显示.
相关的熊猫错误报告:
它在评论对我来说工作完美..."中表示..但是，可以看出，最后5行应包含绿色样式，但不能包含绿色样式.

解决方法

拆分数据框

这令人不满意，但是可以拆分DataFrame并应用样式，因为这样可以减小整体大小.

  cat_mean.iloc [:237，:].style.apply(颜色，轴=无)cat_mean.iloc [237 :,:].style.apply(颜色，轴=无)

保存到Excel

保存到Excel时，所有行均正确显示为带有突出显示的颜色

  test = cat_mean.style.apply(color，axis = None)test.to_excel('test.xlsx'，engine ='openpyxl')

更新1:

以下选项产生的结果与原始尝试的结果相同
- 创建HTML文件的标准python控制台
- PyCharm创建HTML文件
- Jupyter Lab在单元格中显示样式化的数据框.

`pd.show_versions()`

的输出

 安装的版本------------------提交:2cb96529396d93b46abab7bbc73a208e708c642e的Python:3.9.2.final.0python位:64作业系统:Windows操作系统版本:10版本:10.0.19041机器:AMD64处理器:Intel64 Family 6 Model 60 Stepping 3，真正的英特尔字节顺序:小LC_ALL:无朗:无本地电话:English_United States.1252熊猫:1.2.4numpy的:1.20.0pytz:2021.1dateutil:2.8.1点:21.0.1setuptools:52.0.0.post20210125Cython:无pytest:无假设:无狮身人面像:无blosc:无羽毛:无xlsxwriter:无lxml.etree:无html5lib:无pymysql:无psycopg2:无jinja2:2.11.3IPython的:7.22.0pandas_datareader:无bs4:无瓶颈:无fsspec:无fastparquet:无gcsfs:无matplotlib:无numexpr:无odfpy:无openpyxl:无pandas_gbq:无pyarrow:没有pyxlsb:无s3fs:无scipy:无sqlalchemy:无桌子:无列表:无xarray:无xlrd:无xlwt:无numba:无

解决方案

答案:为什么这在Chrome或Edge中不起作用?

每个bug #39400 时，大型数据帧会出现此问题，因为Styler将所有CSS ID放在一个属性中，所有浏览器都无法解析.
在下面的小片段中，所有ID均位于顶部.
- 代码段ID适用于5行和35列，尽管仅包含1个表行的数据.

 < style type ="text/css">#T__row0_col0，#T__row0_col1，#T__row0_col4，#T__row0_col5，#T__row0_col6，#T__row0_col11，#T__row0_col12，#T__row0_col13，#T__row0_col16，#T__row0_col19，#T__row0_col20，#T__row0_col22，#T__row0_col23，#T__row0_col24，#T__row0_col26，#T__row0_col27，#T__row0_col28，#T__row0_col30，#T__row0_col33，#T__row0_col34，#T__row1_col0，#T__row1_col1，#T__row1_col4，#T__row1_col8，#T__row1_col9，#T__row1_col11，#T__row1_col13，#T_row_1，col_T_col_1T__row1_col34，#T__row2_col0，#T__row2_col1，#T__row2_col3，#T__row2_col7，#T__row2_col8，#T__row2_col9，#T__row2_col10，#T__row2_col12，#T__row2_col13，#T__row2_col16，#T__row2_col19，#T__row2_col20，#T__row2_col24，#T__row2_col26，#T__row2_col27，#T__row2_col28，#T__row2_col30，#T__row2_col32，#T__row3_col0，#T__row3_col3，#T__row3_col4，#T__row3_col6，#T__row3_col7，#T__row3_col8，#T__row3_col9，#T__row3_col15，#T__row3_col17，#T__row3_col20，#T__row3_col22，#T__row3_col27，#T__row3_col28，#T__row3_col29，#T__row3_col31，#T__row3_col34，#T__row4_col0，#T__row4_col1，#T__row4_col2，#T__row4_col3，#T__row4_col4，#T__row4_col6，#T__row4_col8，#T__row4_col14，#T__row4_col16，#T__row4_col17，#T__row4_col18，#T__row4_col19，#T__row4_col22，#T__row4_col23，#T__row4_col25，#T__row4_col27，#T__row4_col29，#T__row4_col32，#T__row4_col33 {文本对齐:居中；}#T__row0_col2，#T__row0_col3，#T__row0_col7，#T__row0_col8，#T__row0_col9，#T__row0_col10，#T__row0_col14，#T__row0_col15，#T__row0_col17，#T__row0_col18，col_T_col_0T__row1_col3，#T__row1_col5，#T__row1_col6，#T__row1_col7，#T__row1_col10，#T__row1_col12，#T__row1_col14，#T__row1_col16，#T__row1_col18，#T__row1_col19，#T__row1_col20，#T__row1_col23，#T__row1_col24，#T__row1_col25，#T__row1_col27，#T__row1_col28，#T__row1_col29，#T__row1_col30，#T__row1_col32，#T__row1_col33，#T__row2_col2，#T__row2_col4，#T__row2_col5，#T__row2_col6，#T__row2_col11，#T__row2_col14，#T__row2_col15，#T__row2_col17，#T__row2_col18，#T__row2_col21，#T__row2_col22，#T__row2_col23，#T__row2_col25，#T__row2_col29，#T__row2_col31，#T__row2_col33，#T__row2_col34，#T__row3_col1 、、T__row3_col24，#T__row3_col25，#T__row3_col26，#T__row3_col30，#T__row3_col32，#T__row3_col33，#T__row4_col5，#T__row4_col7，#T__row4_col9，#T__row4_col10，#T__row4_col11，#T__row4_col12，col_T#_row_4#T__row4_col28，#T__row4_col30，#T__row4_col31，#T__row4_col34 {背景颜色:绿色；文本对齐:居中；}</style><表id ="T__">< thead>< tr>< th class ="blank"></th>< th class ="blank level0"></th>< th class ="col_heading level0 col0"> val1</th>< th class ="col_heading level0 col1"> val2</th>< th class ="col_heading level0 col2"> val3</th>< th class ="col_heading level0 col3"> val4</th>< th class ="col_heading level0 col4"> val5</th>< th class ="col_heading level0 col5"> val6</th>< th class ="col_heading level0 col6"> val7</th>< th class ="col_heading level0 col7"> val8</th>< th class ="col_heading level0 col8"> val9</th>< th class ="col_heading level0 col9"> val10</th>< th class ="col_heading level0 col10"> val11</th>< th class ="col_heading level0 col11"> val12</th>< th class ="col_heading level0 col12"> val13</th>< th class ="col_heading level0 col13"> val14</th>< th class ="col_heading level0 col14"> val15</th>< th class ="col_heading level0 col15"> val16</th>< th class ="col_heading level0 col16"> val17</th>< th class ="col_heading level0 col17"> val18</th>< th class ="col_heading level0 col18"> val19</th>< th class ="col_heading level0 col19"> val20</th>< th class ="col_heading level0 col20"> val21</th>< th class ="col_heading level0 col21"> val22</th>< th class ="col_heading level0 col22"> val23</th>< th class ="col_heading level0 col23"> val24</th>< th class ="col_heading level0 col24"> val25</th>< th class ="col_heading level0 col25"> val26</th>< th class ="col_heading level0 col26"> val27</th>< th class ="col_heading level0 col27"> val28</th>< th class ="col_heading level0 col28"> val29</th>< th class ="col_heading level0 col29"> val30</th>< th class ="col_heading level0 col30"> val31</th>< th class ="col_heading level0 col31"> val32</th>< th class ="col_heading level0 col32"> val33</th>< th class ="col_heading level0 col33"> val34</th>< th class ="col_heading level0 col34"> val35</th></tr>< tr>< th class ="index_name level0"> name</th>< th class ="index_name level1"> cat</th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th></tr>/thead< tbody>< tr>< th id ="T__level0_row0" class ="row_heading level0 row0" rowspan ="3"> Alisha Ortiz</th>< th id ="T__level1_row0" class ="row_heading level1 row0"> 1</th>< td id ="T__row0_col0" class =数据row0 col0"> 4.46</td>< td id ="T__row0_col1" class =数据row0 col1"> 4.62</td>< td id ="T__row0_col2" class =数据row0 col2"> 5.73</td>< td id ="T__row0_col3" class ="data row0 col3"> 6.12</td>< td id ="T__row0_col4" class =数据row0 col4"> 4.77</td>< td id ="T__row0_col5" class =数据row0 col5"> 4.73</td>< td id ="T__row0_col6" class =数据row0 col6"> 4.50</td>< td id ="T__row0_col7" class =数据row0 col7"> 6.12</td>< td id ="T__row0_col8" class =数据row0 col8"> 5.50</td>< td id ="T__row0_col9" class =数据row0 col9"> 5.92</td>< td id ="T__row0_col10" class =数据row0 col10"> 6.08</td>< td id ="T__row0_col11" class =数据row0 col11"> 4.92</td>< td id ="T__row0_col12" class =数据row0 col12"> 5.42</td>< td id ="T__row0_col13" class =数据row0 col13"> 5.38</td>< td id ="T__row0_col14" class =数据row0 col14"> 6.08</td>< td id ="T__row0_col15" class =数据row0 col15"> 5.77</td>< td id ="T__row0_col16" class =数据row0 col16"> 5.31</td>< td id ="T__row0_col17" class =数据row0 col17"> 5.58</td>< td id ="T__row0_col18" class =数据row0 col18"> 6.12</td>< td id ="T__row0_col19" class =数据row0 col19"> 4.77</td>< td id ="T__row0_col20" class ="data row0 col20"> 5.19</td>< td id ="T__row0_col21" class =数据row0 col21"> 5.96</td>< td id ="T__row0_col22" class ="data row0 col22"> 4.88</td>< td id ="T__row0_col23" class =数据row0 col23"> 5.31</td>< td id ="T__row0_col24" class =数据row0 col24"> 4.65</td>< td id ="T__row0_col25" class ="data row0 col25"> 5.88</td>< td id ="T__row0_col26" class =数据row0 col26"> 5.38</td>< td id ="T__row0_col27" class ="data row0 col27"> 5.27</td>< td id ="T__row0_col28" class ="data row0 col28"> 4.88</td>< td id ="T__row0_col29" class =数据row0 col29"> 6.35</td>< td id ="T__row0_col30" class =数据row0 col30"> 5.19</td>< td id ="T__row0_col31" class =数据row0 col31"> 5.81</td>< td id ="T__row0_col32" class =数据row0 col32"> 5.85</td>< td id ="T__row0_col33" class =数据row0 col33"> 5.46</td>< td id ="T__row0_col34" class ="data row0 col34"> 4.50</td></tr>

答案:是否有一种更有效的方式来应用样式?

OP已经建议将DataFrame分成多个部分.
Pandas:表格可视化用户指南包含可能的优化
- 设置 uuid_len = 0 ， cell_ids = False 会使文件大小稍小，但不能解决此问题.
  - s4 = Styler(cat_mean，uuid_len = 0，cell_ids = False).apply(color，axis = None)
  - 通常，uuid看起来像 id ="T_5409d_level0_row0&"; ，但对于 uuid_len = 0 ，它看起来就像 id ="T__level0_row0&"
- 在以下位置使用 table_styles :这些将类添加到行或列(而不是单个单元格)，因此，如果您具有这些分组，则最好使用它们.对于OP，行/列很多，设置行或列 table_styles 可能不是有效的选择

有一种方法 set_td_classes ，它允许您引用外部CSS类.( 1.3.0中的错误修正)以下使用 class 的代码应该可以使用，但会受到错误  def测试(s，props ="):t = np.where(s.gt(mean [s.name])，props，'')返回tbuild = lambda x:pd.DataFrame(x，索引= cat_mean.index，列= cat_mean.columns)cls1 = build(cat_mean.apply(test，props ='cls-1'，axis = 0))测试= cat_mean.style.set_table_styles([['selector':'.cls-1'，'props':[('color'，'white')，('background-color'，'darkblue']]}]]).set_td_classes(cls1) 
应该生成类似于以下内容的HTML，它为每个值使用 class = ，而不是将所有样式化的行ID放在HTML的顶部.
但是，如上所述，它也有一个错误，不能正常工作
 
 < style type ="text/css">#T_b3f37_ .cls-1 {白颜色;背景颜色:深蓝色；}</style><表id ="T_b3f37_">< thead>< tr>< th class ="blank"></th>< th class ="blank level0"></th>< th class ="col_heading level0 col0"> val1</th>< th class ="col_heading level0 col1"> val2</th>< th class ="col_heading level0 col2"> val3</th>< th class ="col_heading level0 col3"> val4</th>< th class ="col_heading level0 col4"> val5</th>< th class ="col_heading level0 col5"> val6</th>< th class ="col_heading level0 col6"> val7</th>< th class ="col_heading level0 col7"> val8</th>< th class ="col_heading level0 col8"> val9</th>< th class ="col_heading level0 col9"> val10</th>< th class ="col_heading level0 col10"> val11</th>< th class ="col_heading level0 col11"> val12</th>< th class ="col_heading level0 col12"> val13</th>< th class ="col_heading level0 col13"> val14</th>< th class ="col_heading level0 col14"> val15</th>< th class ="col_heading level0 col15"> val16</th>< th class ="col_heading level0 col16"> val17</th>< th class ="col_heading level0 col17"> val18</th>< th class ="col_heading level0 col18"> val19</th>< th class ="col_heading level0 col19"> val20</th>< th class ="col_heading level0 col20"> val21</th>< th class ="col_heading level0 col21"> val22</th>< th class ="col_heading level0 col22"> val23</th>< th class ="col_heading level0 col23"> val24</th>< th class ="col_heading level0 col24"> val25</th>< th class ="col_heading level0 col25"> val26</th>< th class ="col_heading level0 col26"> val27</th>< th class ="col_heading level0 col27"> val28</th>< th class ="col_heading level0 col28"> val29</th>< th class ="col_heading level0 col29"> val30</th>< th class ="col_heading level0 col30"> val31</th>< th class ="col_heading level0 col31"> val32</th>< th class ="col_heading level0 col32"> val33</th>< th class ="col_heading level0 col33"> val34</th>< th class ="col_heading level0 col34"> val35</th></tr>< tr>< th class ="index_name level0"> name</th>< th class ="index_name level1"> cat</th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th>< th class ="blank"></th></tr>/thead< tbody>< tr>< th id ="T_b3f37_level0_row0" class ="row_heading level0 row0" rowspan ="3"> Adriana Mcknight<< th id ="T_b3f37_level1_row0" class ="row_heading level1 row0"> 1</th>< td id ="T_b3f37_row0_col0" class =数据row0 col0 cls-1"> 5.782609</td>< td id ="T_b3f37_row0_col1" class =数据row0 col1 cls-1"> 5.652174</td>< td id ="T_b3f37_row0_col2" class =数据row0 col2 cls-1"> 6.130435</td>< td id ="T_b3f37_row0_col3" class =数据row0 col3 cls-1"> 6.086957</td>< td id ="T_b3f37_row0_col4" class =数据row0 col4"> 4.478261</td>< td id ="T_b3f37_row0_col5" class =数据row0 col5"> 4.565217</td>< td id ="T_b3f37_row0_col6" class =数据row0 col6"> 5.826087</td>< td id ="T_b3f37_row0_col7" class =数据row0 col7"> 5.956522</td>< td id ="T_b3f37_row0_col8" class =数据row0 col8"> 4.782609</td>< td id ="T_b3f37_row0_col9" class =数据row0 col9"> 5.347826</td>< td id ="T_b3f37_row0_col10" class =数据row0 col10"> 5.260870</td>< td id ="T_b3f37_row0_col11" class =数据row0 col11"> 5.130435</td>< td id ="T_b3f37_row0_col12" class =数据row0 col12"> 5.217391</td>< td id ="T_b3f37_row0_col13" class =数据row0 col13"> 6.173913</td>< td id ="T_b3f37_row0_col14" class =数据row0 col14"> 5.043478</td>< td id ="T_b3f37_row0_col15" class =数据row0 col15"> 6.391304</td>< td id ="T_b3f37_row0_col16" class =数据row0 col16"> 5.217391</td>< td id ="T_b3f37_row0_col17" class =数据row0 col17"> 5.913043</td>< td id ="T_b3f37_row0_col18" class =数据row0 col18"> 5.608696</td>< td id ="T_b3f37_row0_col19" class =数据row0 col19"> 5.869565</td>< td id ="T_b3f37_row0_col20" class =数据row0 col20"> 6.086957</td>< td id ="T_b3f37_row0_col21" class =数据row0 col21"> 4.826087</td>< td id ="T_b3f37_row0_col22" class =数据row0 col22"> 5.739130</td>< td id ="T_b3f37_row0_col23" class =数据row0 col23"> 6.304348</td>< td id ="T_b3f37_row0_col24" class =数据row0 col24"> 5.347826</td>< td id ="T_b3f37_row0_col25" class =数据row0 col25"> 5.173913</td>< td id ="T_b3f37_row0_col26" class =数据row0 col26"> 4.608696</td>< td id ="T_b3f37_row0_col27" class =数据row0 col27"> 5.391304</td>< td id ="T_b3f37_row0_col28" class =数据row0 col28"> 5.652174</td>< td id ="T_b3f37_row0_col29" class =数据row0 col29"> 5.434783</td>< td id ="T_b3f37_row0_col30" class =数据row0 col30"> 5.565217</td>< td id ="T_b3f37_row0_col31" class =数据row0 col31"> 5.956522</td>< td id ="T_b3f37_row0_col32" class =数据row0 col32"> 6.043478</td>< td id ="T_b3f37_row0_col33" class =数据row0 col33"> 5.217391</td>< td id ="T_b3f37_row0_col34" class =数据row0 col34 cls-1"> 5.521739</td></tr>  
随着错误得到解决，我将更新此答案.
Update 2:

The issue seems to be Google Chrome and Microsoft Edge
Jupyter Lab in Firefox correctly displays all of the styled rows and correctly renders an output HTML file.
The updated questions are

Why doesn't this work in Chrome or Edge?
Is there a more efficient way to apply the styling?



Original:

Questions - they are interrelated:

Why aren't all of the rows displaying the background styling in Jupyter or writing to HTML?

All rows should have green styling, but the last 5 do not display the styling.


How can all of the rows be made to display the background styling?


Given a large dataframe, in this case 474 rows x 35 columns, the applied styling stops displaying.




If the number of rows or columns increases beyond this size, then more rows aren't displayed.
We can see from the styling map, that the rows are correctly mapped with a background color, but it isn't displayed.




If the number of rows or columns is reduced, then all of the rows display the correct styling.
Tested in jupyterlab v3.0.11
In PyCharm 2021.1 (Professional Edition) Build #PY-211.6693.115, built on April 6, 2021 saving the redendered styler to a file has the same result, so this isn't just an issue with jupyter.
This issue is reproducible on two different systems, that I have tried.
If the shape is reduced to 471 rows × 35 columns or 474 rows × 34 columns, then all rows correctly display the highlighting.
Associated pandas bug report: 40913

Reproducible DataFrame
import pandas as pd
import numpy as np
from faker import Faker  # conda install -c conda-forge faker or pip install Faker

# for fake names
fake = Faker()

# test data
np.random.seed(365)
rows = 11000

# change 36 or 158 to test where the rows stop appearing
vals = {f'val{i}': np.random.randint(1, 11, size=(rows)) for i in range(1, 36)}
data = {'name': np.random.choice([fake.unique.name() for i in range(158)], size=rows),
        'cat': np.random.randint(1, 4, size=(rows))}
data.update(vals)

df = pd.DataFrame(data)

# used to create the mask for the background color
mean = df.groupby('cat').mean().round(2)

# calculate the mean for each name and cat
cat_mean = df.groupby(['name', 'cat']).mean()


def color(x):
    """Function to apply background color"""
    c1 = 'background-color: green'
    c = '' 
    # compare columns
    mask1 = x.gt(mean)
    # DataFrame with same index and columns names as original filled empty strings
    df1 =  pd.DataFrame(c, index=x.index, columns=x.columns)
    # modify values of df1 column by boolean mask
    df1.iloc[mask1] = c1
    display(df1)

    return df1

# Last line in notebook displays the styled dataframe
cat_mean.style.apply(color, axis=None)

# Last line in PyCharm saving rendered styler to file
cm = cat_mean.style.apply(color, axis=None).set_precision(3).render()

with open('cm_test.html', 'w') as f:
    f.write(cm)

Reference

This answer was referenced for the function to apply the background color.
This question is similar, but has no answer.

Output of pd.show_versions()
INSTALLED VERSIONS
------------------
commit           : f2c8480af2f25efdbd803218b9d87980f416563e
python           : 3.8.8.final.0
python-bits      : 64
OS               : Windows
OS-release       : 10
Version          : 10.0.19041
machine          : AMD64
processor        : Intel64 Family 6 Model 60 Stepping 3, GenuineIntel
byteorder        : little
LC_ALL           : None
LANG             : None
LOCALE           : English_United States.1252

pandas           : 1.2.3
numpy            : 1.19.2
pytz             : 2021.1
dateutil         : 2.8.1
pip              : 21.0.1
setuptools       : 52.0.0.post20210125
Cython           : 0.29.22
pytest           : 6.2.3
hypothesis       : None
sphinx           : 3.5.3
blosc            : None
feather          : None
xlsxwriter       : 1.3.8
lxml.etree       : 4.6.3
html5lib         : 1.1
pymysql          : None
psycopg2         : None
jinja2           : 2.11.3
IPython          : 7.22.0
pandas_datareader: 0.9.0
bs4              : 4.9.3
bottleneck       : 1.3.2
fsspec           : 0.9.0
fastparquet      : None
gcsfs            : None
matplotlib       : 3.3.4
numexpr          : 2.7.3
odfpy            : None
openpyxl         : 3.0.7
pandas_gbq       : None
pyarrow          : None
pyxlsb           : None
s3fs             : None
scipy            : 1.6.2
sqlalchemy       : 1.4.5
tables           : 3.6.1
tabulate         : 0.8.9
xarray           : None
xlrd             : 2.0.1
xlwt             : 1.3.0
numba            : 0.53.1

Example from jezrael


It was stated in the comment "for me working perfectly...". However, as can be seen, the last 5 rows should contain green styling, but they do not.

Workaround
Split DataFrame

It's dissatisfying, but splitting the DataFrame and applying the style will work, since if reduces the overall size.

cat_mean.iloc[:237, :].style.apply(color, axis=None)
cat_mean.iloc[237:, :].style.apply(color, axis=None)

Save to Excel

All rows are displayed correctly with the highlight color when saving to Excel

test = cat_mean.style.apply(color, axis=None)
test.to_excel('test.xlsx', engine='openpyxl')

Update 1:

The following options produced the same results as the original attempts

Standard python console creating HTML file
PyCharm creating HTML file
Jupyter Lab displaying styled dataframe in a cell.



Output of pd.show_versions()
INSTALLED VERSIONS
------------------
commit           : 2cb96529396d93b46abab7bbc73a208e708c642e
python           : 3.9.2.final.0
python-bits      : 64
OS               : Windows
OS-release       : 10
Version          : 10.0.19041
machine          : AMD64
processor        : Intel64 Family 6 Model 60 Stepping 3, GenuineIntel
byteorder        : little
LC_ALL           : None
LANG             : None
LOCALE           : English_United States.1252

pandas           : 1.2.4
numpy            : 1.20.0
pytz             : 2021.1
dateutil         : 2.8.1
pip              : 21.0.1
setuptools       : 52.0.0.post20210125
Cython           : None
pytest           : None
hypothesis       : None
sphinx           : None
blosc            : None
feather          : None
xlsxwriter       : None
lxml.etree       : None
html5lib         : None
pymysql          : None
psycopg2         : None
jinja2           : 2.11.3
IPython          : 7.22.0
pandas_datareader: None
bs4              : None
bottleneck       : None
fsspec           : None
fastparquet      : None
gcsfs            : None
matplotlib       : None
numexpr          : None
odfpy            : None
openpyxl         : None
pandas_gbq       : None
pyarrow          : None
pyxlsb           : None
s3fs             : None
scipy            : None
sqlalchemy       : None
tables           : None
tabulate         : None
xarray           : None
xlrd             : None
xlwt             : None
numba            : None

 解决方案 
Answering: Why doesn't this work in Chrome or Edge?

Per bug #39400, the issue occurs for large DataFrames because Styler puts all CSS ids on a single attribute, which are not resolved be all browsers.
In the following small snippet, see that all the ids are at the top.

The snippet ids are for 5 rows and 35 columns, though only data for 1 table row is included.





<style  type="text/css" >
#T__row0_col0,#T__row0_col1,#T__row0_col4,#T__row0_col5,#T__row0_col6,#T__row0_col11,#T__row0_col12,#T__row0_col13,#T__row0_col16,#T__row0_col19,#T__row0_col20,#T__row0_col22,#T__row0_col23,#T__row0_col24,#T__row0_col26,#T__row0_col27,#T__row0_col28,#T__row0_col30,#T__row0_col33,#T__row0_col34,#T__row1_col0,#T__row1_col1,#T__row1_col4,#T__row1_col8,#T__row1_col9,#T__row1_col11,#T__row1_col13,#T__row1_col15,#T__row1_col17,#T__row1_col21,#T__row1_col22,#T__row1_col26,#T__row1_col31,#T__row1_col34,#T__row2_col0,#T__row2_col1,#T__row2_col3,#T__row2_col7,#T__row2_col8,#T__row2_col9,#T__row2_col10,#T__row2_col12,#T__row2_col13,#T__row2_col16,#T__row2_col19,#T__row2_col20,#T__row2_col24,#T__row2_col26,#T__row2_col27,#T__row2_col28,#T__row2_col30,#T__row2_col32,#T__row3_col0,#T__row3_col3,#T__row3_col4,#T__row3_col6,#T__row3_col7,#T__row3_col8,#T__row3_col9,#T__row3_col15,#T__row3_col17,#T__row3_col20,#T__row3_col22,#T__row3_col27,#T__row3_col28,#T__row3_col29,#T__row3_col31,#T__row3_col34,#T__row4_col0,#T__row4_col1,#T__row4_col2,#T__row4_col3,#T__row4_col4,#T__row4_col6,#T__row4_col8,#T__row4_col14,#T__row4_col16,#T__row4_col17,#T__row4_col18,#T__row4_col19,#T__row4_col22,#T__row4_col23,#T__row4_col25,#T__row4_col27,#T__row4_col29,#T__row4_col32,#T__row4_col33{
            text-align:  center;
        }#T__row0_col2,#T__row0_col3,#T__row0_col7,#T__row0_col8,#T__row0_col9,#T__row0_col10,#T__row0_col14,#T__row0_col15,#T__row0_col17,#T__row0_col18,#T__row0_col21,#T__row0_col25,#T__row0_col29,#T__row0_col31,#T__row0_col32,#T__row1_col2,#T__row1_col3,#T__row1_col5,#T__row1_col6,#T__row1_col7,#T__row1_col10,#T__row1_col12,#T__row1_col14,#T__row1_col16,#T__row1_col18,#T__row1_col19,#T__row1_col20,#T__row1_col23,#T__row1_col24,#T__row1_col25,#T__row1_col27,#T__row1_col28,#T__row1_col29,#T__row1_col30,#T__row1_col32,#T__row1_col33,#T__row2_col2,#T__row2_col4,#T__row2_col5,#T__row2_col6,#T__row2_col11,#T__row2_col14,#T__row2_col15,#T__row2_col17,#T__row2_col18,#T__row2_col21,#T__row2_col22,#T__row2_col23,#T__row2_col25,#T__row2_col29,#T__row2_col31,#T__row2_col33,#T__row2_col34,#T__row3_col1,#T__row3_col2,#T__row3_col5,#T__row3_col10,#T__row3_col11,#T__row3_col12,#T__row3_col13,#T__row3_col14,#T__row3_col16,#T__row3_col18,#T__row3_col19,#T__row3_col21,#T__row3_col23,#T__row3_col24,#T__row3_col25,#T__row3_col26,#T__row3_col30,#T__row3_col32,#T__row3_col33,#T__row4_col5,#T__row4_col7,#T__row4_col9,#T__row4_col10,#T__row4_col11,#T__row4_col12,#T__row4_col13,#T__row4_col15,#T__row4_col20,#T__row4_col21,#T__row4_col24,#T__row4_col26,#T__row4_col28,#T__row4_col30,#T__row4_col31,#T__row4_col34{
            background-color:  green;
            text-align:  center;
        }</style><table id="T__" ><thead>    <tr>        <th class="blank" ></th>        <th class="blank level0" ></th>        <th class="col_heading level0 col0" >val1</th>        <th class="col_heading level0 col1" >val2</th>        <th class="col_heading level0 col2" >val3</th>        <th class="col_heading level0 col3" >val4</th>        <th class="col_heading level0 col4" >val5</th>        <th class="col_heading level0 col5" >val6</th>        <th class="col_heading level0 col6" >val7</th>        <th class="col_heading level0 col7" >val8</th>        <th class="col_heading level0 col8" >val9</th>        <th class="col_heading level0 col9" >val10</th>        <th class="col_heading level0 col10" >val11</th>        <th class="col_heading level0 col11" >val12</th>        <th class="col_heading level0 col12" >val13</th>        <th class="col_heading level0 col13" >val14</th>        <th class="col_heading level0 col14" >val15</th>        <th class="col_heading level0 col15" >val16</th>        <th class="col_heading level0 col16" >val17</th>        <th class="col_heading level0 col17" >val18</th>        <th class="col_heading level0 col18" >val19</th>        <th class="col_heading level0 col19" >val20</th>        <th class="col_heading level0 col20" >val21</th>        <th class="col_heading level0 col21" >val22</th>        <th class="col_heading level0 col22" >val23</th>        <th class="col_heading level0 col23" >val24</th>        <th class="col_heading level0 col24" >val25</th>        <th class="col_heading level0 col25" >val26</th>        <th class="col_heading level0 col26" >val27</th>        <th class="col_heading level0 col27" >val28</th>        <th class="col_heading level0 col28" >val29</th>        <th class="col_heading level0 col29" >val30</th>        <th class="col_heading level0 col30" >val31</th>        <th class="col_heading level0 col31" >val32</th>        <th class="col_heading level0 col32" >val33</th>        <th class="col_heading level0 col33" >val34</th>        <th class="col_heading level0 col34" >val35</th>    </tr>    <tr>        <th class="index_name level0" >name</th>        <th class="index_name level1" >cat</th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>    </tr></thead><tbody>
                <tr>
                        <th id="T__level0_row0" class="row_heading level0 row0" rowspan="3">Alisha Ortiz</th>
                        <th id="T__level1_row0" class="row_heading level1 row0" >1</th>
                        <td id="T__row0_col0" class="data row0 col0" >4.46</td>
                        <td id="T__row0_col1" class="data row0 col1" >4.62</td>
                        <td id="T__row0_col2" class="data row0 col2" >5.73</td>
                        <td id="T__row0_col3" class="data row0 col3" >6.12</td>
                        <td id="T__row0_col4" class="data row0 col4" >4.77</td>
                        <td id="T__row0_col5" class="data row0 col5" >4.73</td>
                        <td id="T__row0_col6" class="data row0 col6" >4.50</td>
                        <td id="T__row0_col7" class="data row0 col7" >6.12</td>
                        <td id="T__row0_col8" class="data row0 col8" >5.50</td>
                        <td id="T__row0_col9" class="data row0 col9" >5.92</td>
                        <td id="T__row0_col10" class="data row0 col10" >6.08</td>
                        <td id="T__row0_col11" class="data row0 col11" >4.92</td>
                        <td id="T__row0_col12" class="data row0 col12" >5.42</td>
                        <td id="T__row0_col13" class="data row0 col13" >5.38</td>
                        <td id="T__row0_col14" class="data row0 col14" >6.08</td>
                        <td id="T__row0_col15" class="data row0 col15" >5.77</td>
                        <td id="T__row0_col16" class="data row0 col16" >5.31</td>
                        <td id="T__row0_col17" class="data row0 col17" >5.58</td>
                        <td id="T__row0_col18" class="data row0 col18" >6.12</td>
                        <td id="T__row0_col19" class="data row0 col19" >4.77</td>
                        <td id="T__row0_col20" class="data row0 col20" >5.19</td>
                        <td id="T__row0_col21" class="data row0 col21" >5.96</td>
                        <td id="T__row0_col22" class="data row0 col22" >4.88</td>
                        <td id="T__row0_col23" class="data row0 col23" >5.31</td>
                        <td id="T__row0_col24" class="data row0 col24" >4.65</td>
                        <td id="T__row0_col25" class="data row0 col25" >5.88</td>
                        <td id="T__row0_col26" class="data row0 col26" >5.38</td>
                        <td id="T__row0_col27" class="data row0 col27" >5.27</td>
                        <td id="T__row0_col28" class="data row0 col28" >4.88</td>
                        <td id="T__row0_col29" class="data row0 col29" >6.35</td>
                        <td id="T__row0_col30" class="data row0 col30" >5.19</td>
                        <td id="T__row0_col31" class="data row0 col31" >5.81</td>
                        <td id="T__row0_col32" class="data row0 col32" >5.85</td>
                        <td id="T__row0_col33" class="data row0 col33" >5.46</td>
                        <td id="T__row0_col34" class="data row0 col34" >4.50</td>
            </tr>




Answering: Is there a more efficient way to apply the styling?

The OP already suggests splitting the DataFrame into sections.
The Pandas: Table Visualization User Guide contains possible Optimizations

Setting uuid_len=0, cell_ids=False makes the file size slightly smaller, but does not resolve this issue.

s4 = Styler(cat_mean, uuid_len=0, cell_ids=False).apply(color, axis=None)
Normally the uuid would look like id="T_5409d_level0_row0", but with uuid_len=0, it looks like id="T__level0_row0"


Use table_styles where you can: these add classes to rows or columns (not individual cells) so if you have those groupings its best to use them.

In the case of the OP, where there are many rows / columns, setting row or column table_styles may not be a valid option




There is method set_td_classes, which allows you to refer to external css classes. (a bugfix is in 1.3.0)

The following code using a class should work, but is affected by bug #39317



def test(s, props=''):
    t = np.where(s.gt(mean[s.name]), props, '')
    return t

build = lambda x: pd.DataFrame(x, index=cat_mean.index, columns=cat_mean.columns)
cls1 = build(cat_mean.apply(test, props='cls-1 ', axis=0))

test = cat_mean.style.set_table_styles([{'selector': '.cls-1', 'props': [('color', 'white'), ('background-color', 'darkblue')]}]).set_td_classes(cls1)


Which should generate HTML more like the following, which uses the class= for each value, instead of placing all the styled rows ids at the top of the HTML.
However, this also has a bug, as mentioned, and doesn't work correctly



<style  type="text/css" >
    #T_b3f37_ .cls-1 {
          color: white;
          background-color: darkblue;
    }</style><table id="T_b3f37_" ><thead>    <tr>        <th class="blank" ></th>        <th class="blank level0" ></th>        <th class="col_heading level0 col0" >val1</th>        <th class="col_heading level0 col1" >val2</th>        <th class="col_heading level0 col2" >val3</th>        <th class="col_heading level0 col3" >val4</th>        <th class="col_heading level0 col4" >val5</th>        <th class="col_heading level0 col5" >val6</th>        <th class="col_heading level0 col6" >val7</th>        <th class="col_heading level0 col7" >val8</th>        <th class="col_heading level0 col8" >val9</th>        <th class="col_heading level0 col9" >val10</th>        <th class="col_heading level0 col10" >val11</th>        <th class="col_heading level0 col11" >val12</th>        <th class="col_heading level0 col12" >val13</th>        <th class="col_heading level0 col13" >val14</th>        <th class="col_heading level0 col14" >val15</th>        <th class="col_heading level0 col15" >val16</th>        <th class="col_heading level0 col16" >val17</th>        <th class="col_heading level0 col17" >val18</th>        <th class="col_heading level0 col18" >val19</th>        <th class="col_heading level0 col19" >val20</th>        <th class="col_heading level0 col20" >val21</th>        <th class="col_heading level0 col21" >val22</th>        <th class="col_heading level0 col22" >val23</th>        <th class="col_heading level0 col23" >val24</th>        <th class="col_heading level0 col24" >val25</th>        <th class="col_heading level0 col25" >val26</th>        <th class="col_heading level0 col26" >val27</th>        <th class="col_heading level0 col27" >val28</th>        <th class="col_heading level0 col28" >val29</th>        <th class="col_heading level0 col29" >val30</th>        <th class="col_heading level0 col30" >val31</th>        <th class="col_heading level0 col31" >val32</th>        <th class="col_heading level0 col32" >val33</th>        <th class="col_heading level0 col33" >val34</th>        <th class="col_heading level0 col34" >val35</th>    </tr>    <tr>        <th class="index_name level0" >name</th>        <th class="index_name level1" >cat</th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>        <th class="blank" ></th>    </tr></thead><tbody>
                <tr>
                        <th id="T_b3f37_level0_row0" class="row_heading level0 row0" rowspan="3">Adriana Mcknight</th>
                        <th id="T_b3f37_level1_row0" class="row_heading level1 row0" >1</th>
                        <td id="T_b3f37_row0_col0" class="data row0 col0 cls-1 " >5.782609</td>
                        <td id="T_b3f37_row0_col1" class="data row0 col1 cls-1 " >5.652174</td>
                        <td id="T_b3f37_row0_col2" class="data row0 col2 cls-1 " >6.130435</td>
                        <td id="T_b3f37_row0_col3" class="data row0 col3 cls-1 " >6.086957</td>
                        <td id="T_b3f37_row0_col4" class="data row0 col4" >4.478261</td>
                        <td id="T_b3f37_row0_col5" class="data row0 col5" >4.565217</td>
                        <td id="T_b3f37_row0_col6" class="data row0 col6" >5.826087</td>
                        <td id="T_b3f37_row0_col7" class="data row0 col7" >5.956522</td>
                        <td id="T_b3f37_row0_col8" class="data row0 col8" >4.782609</td>
                        <td id="T_b3f37_row0_col9" class="data row0 col9" >5.347826</td>
                        <td id="T_b3f37_row0_col10" class="data row0 col10" >5.260870</td>
                        <td id="T_b3f37_row0_col11" class="data row0 col11" >5.130435</td>
                        <td id="T_b3f37_row0_col12" class="data row0 col12" >5.217391</td>
                        <td id="T_b3f37_row0_col13" class="data row0 col13" >6.173913</td>
                        <td id="T_b3f37_row0_col14" class="data row0 col14" >5.043478</td>
                        <td id="T_b3f37_row0_col15" class="data row0 col15" >6.391304</td>
                        <td id="T_b3f37_row0_col16" class="data row0 col16" >5.217391</td>
                        <td id="T_b3f37_row0_col17" class="data row0 col17" >5.913043</td>
                        <td id="T_b3f37_row0_col18" class="data row0 col18" >5.608696</td>
                        <td id="T_b3f37_row0_col19" class="data row0 col19" >5.869565</td>
                        <td id="T_b3f37_row0_col20" class="data row0 col20" >6.086957</td>
                        <td id="T_b3f37_row0_col21" class="data row0 col21" >4.826087</td>
                        <td id="T_b3f37_row0_col22" class="data row0 col22" >5.739130</td>
                        <td id="T_b3f37_row0_col23" class="data row0 col23" >6.304348</td>
                        <td id="T_b3f37_row0_col24" class="data row0 col24" >5.347826</td>
                        <td id="T_b3f37_row0_col25" class="data row0 col25" >5.173913</td>
                        <td id="T_b3f37_row0_col26" class="data row0 col26" >4.608696</td>
                        <td id="T_b3f37_row0_col27" class="data row0 col27" >5.391304</td>
                        <td id="T_b3f37_row0_col28" class="data row0 col28" >5.652174</td>
                        <td id="T_b3f37_row0_col29" class="data row0 col29" >5.434783</td>
                        <td id="T_b3f37_row0_col30" class="data row0 col30" >5.565217</td>
                        <td id="T_b3f37_row0_col31" class="data row0 col31" >5.956522</td>
                        <td id="T_b3f37_row0_col32" class="data row0 col32" >6.043478</td>
                        <td id="T_b3f37_row0_col33" class="data row0 col33" >5.217391</td>
                        <td id="T_b3f37_row0_col34" class="data row0 col34 cls-1 " >5.521739</td>
            </tr>





I'll update this answer as bugs get resolved.


                        这篇关于在Chrome或Edge中，并非大数据框中的所有行都显示 pandas 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

在Chrome或Edge中，并非大数据框中的所有行都显示 pandas 样式 [英] pandas styling doesn't display for all rows in large dataframes in Chrome or Edge

问题描述

更新2:

原文:

解决方法

拆分数据框

保存到Excel

更新1:

`pd.show_versions()`

答案:为什么这在Chrome或Edge中不起作用?

答案:是否有一种更有效的方式来应用样式?

Update 2:

Original:

Reproducible DataFrame

Reference

Output of `pd.show_versions()`

Example from jezrael

Workaround

Split DataFrame

Save to Excel

Update 1:

Output of `pd.show_versions()`

Answering: Why doesn't this work in Chrome or Edge?

Answering: Is there a more efficient way to apply the styling?

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

在Chrome或Edge中，并非大数据框中的所有行都显示 pandas 样式 [英] pandas styling doesn&#39;t display for all rows in large dataframes in Chrome or Edge

问题描述

更新2:

原文:

解决方法

拆分数据框

保存到Excel

更新1:

pd.show_versions()

答案:为什么这在Chrome或Edge中不起作用?

答案:是否有一种更有效的方式来应用样式?

Update 2:

Original:

Reproducible DataFrame

Reference

Output of pd.show_versions()

Example from jezrael

Workaround

Split DataFrame

Save to Excel

Update 1:

Output of pd.show_versions()

Answering: Why doesn't this work in Chrome or Edge?

Answering: Is there a more efficient way to apply the styling?

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

在Chrome或Edge中，并非大数据框中的所有行都显示 pandas 样式 [英] pandas styling doesn't display for all rows in large dataframes in Chrome or Edge

`pd.show_versions()`

Output of `pd.show_versions()`

Output of `pd.show_versions()`

登录关闭