Jupyter中并排显示DataFrame时标题位置异常问题求助

我参考了Stack Overflow上的《Jupyter notebook display two pandas tables side by side》问题的首个解决方案，但使用时遇到标题显示异常的问题。

原解决方案代码 #

from IPython.display import display_html
from itertools import chain,cycle
def display_side_by_side(*args,titles=cycle([''])):
    html_str=''
    for df,title in zip(args, chain(titles,cycle(['</br>'])) ):
        html_str+='<th style="text-align:center"><td style="vertical-align:top">'
        html_str+=f'<h2 style="text-align: center;">{title}</h2>'
        html_str+=df.to_html().replace('table','table style="display:inline"')
        html_str+='</td></th>'
    display_html(html_str,raw=True)

问题现象 #

• 注释掉添加标题的代码行html_str+=f'<h2 style="text-align: center;">{title}</h2>'后，执行以下测试代码，三个DataFrame可以正常并排显示：

import pandas as pd
import numpy as np

df1 = pd.DataFrame(np.arange(12).reshape((3,4)),columns=['A','B','C','D',])
df2 = pd.DataFrame(np.arange(16).reshape((4,4)),columns=['A','B','C','D',])
df3 = pd.DataFrame(np.arange(12).reshape((3,4)),columns=['A','B','C','D',])
display_side_by_side(df1,df2,df3, titles=['Foo','Foo Bar','Foo Bar Bar'])

• 保留标题行时，标题会显示在页面中央而非对应DataFrame的上方，每个DataFrame单独占一行、左对齐，布局完全错乱。

问题原因 #

从生成的HTML可以看出，原代码将<h2>标题标签放在了<th>标签外面，而<h2>是块级元素，默认会独占一行，直接破坏了表格的并排布局。必须把标题和对应表格放在同一个容器内，确保每个标题+表格的组合是一个独立的可并排单元。

修正后的代码 #

from IPython.display import display_html
from itertools import chain, cycle

def display_side_by_side(*args, titles=cycle([''])):
    html_str = ''
    # 给每个标题+表格的组合包裹成inline-block容器，保证并排
    container_style = 'display: inline-block; margin: 0 10px; text-align: center;'
    for df, title in zip(args, chain(titles, cycle(['']))):
        html_str += f'<div style="{container_style}">'
        html_str += f'<h2 style="text-align: center;">{title}</h2>'
        # 表格不需要额外设置display:inline，因为外层容器已经是inline-block
        html_str += df.to_html()
        html_str += '</div>'
    display_html(html_str, raw=True)

改动说明 #

1. 用<div>作为每个标题+表格的容器，设置display: inline-block，让每个组合成为可并排的块级单元
2. 给容器添加左右边距，避免表格之间过于拥挤
3. 去掉表格的display:inline设置，外层容器的布局已经足够控制并排
4. 修正了原代码中<th>和<td>标签滥用的问题（原代码直接嵌套不符合HTML规范）

执行测试代码后，标题会显示在对应表格的正上方，三个表格可以正常并排显示。

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