如何修改Python Pandas代码实现HTML表格上下+并排布局？

嘿，我来帮你搞定这个布局问题！你现在的代码只是把三个表格的HTML字符串直接拼接在一起，浏览器自然会把它们垂直排列。要实现「一个表格在上，另外两个并排」的效果，我们需要借助HTML的布局能力，用CSS来控制表格的排列方式。

核心修改思路 #

我们需要给后两个表格套一个弹性布局容器（flex container），让它们横向排列。同时可以给表格加一些基础样式，让整体看起来更舒服。下面是两种可行的修改方案：

方案1：完整HTML文档（推荐） #

这种方式构建了完整的HTML结构，样式管理更清晰，也方便后续扩展：

import numpy as np
from numpy.random import randn
import pandas as pd

df = pd.DataFrame(randn(5,4),columns='W X Y Z'.split())
df1 = pd.DataFrame(randn(5,4),columns='A B C D'.split())
df2 = pd.DataFrame(randn(5,4),columns='E F G K'.split())

# 构建带样式的完整HTML内容
html_content = f"""
<!DOCTYPE html>
<html>
<head>
    <style>
        /* 控制并排表格的容器样式 */
        .flex-container {{
            display: flex;
            gap: 20px; /* 两个表格之间的间隔 */
            margin-top: 20px; /* 和上方表格的距离 */
        }}
        /* 给表格加基础美化样式（可选） */
        table {{
            border-collapse: collapse;
            border: 1px solid #ddd;
            font-family: Arial, sans-serif;
        }}
        th, td {{
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }}
        th {{
            background-color: #f5f5f5;
        }}
    </style>
</head>
<body>
    <!-- 第一个单独的表格 -->
    {df.head().to_html()}
    
    <!-- 包裹后两个表格的弹性容器 -->
    <div class="flex-container">
        {df1.head().to_html()}
        {df2.head().to_html()}
    </div>
</body>
</html>
"""

with open("a.html", 'w') as _file:
    _file.write(html_content)

关键改动点：

1. 不再直接拼接表格HTML，而是生成了完整的HTML文档，包含<head>（用来写CSS样式）和<body>（放表格内容）。
2. 添加了.flex-container类，通过display: flex让容器内的两个表格横向并排，gap和margin-top用来控制间距。
3. 给表格加了基础美化样式，你可以根据自己的需求调整颜色、字体、内边距等。

方案2：极简版（快速修改） #

如果你不想写完整的HTML结构，也可以直接在原代码中插入带inline样式的div，同样能实现效果：

import numpy as np
from numpy.random import randn
import pandas as pd

df = pd.DataFrame(randn(5,4),columns='W X Y Z'.split())
df1 = pd.DataFrame(randn(5,4),columns='A B C D'.split())
df2 = pd.DataFrame(randn(5,4),columns='E F G K'.split())

with open("a.html", 'w') as _file:
    _file.write(
        df.head().to_html() + 
        '\n<div style="display: flex; gap: 20px; margin-top: 20px;">' + 
        df1.head().to_html() + 
        df2.head().to_html() + 
        '</div>'
    )

这种方式只在原代码基础上添加了一个带display: flex样式的div，把后两个表格包起来，简单直接。

两种方案都能实现你想要的布局，选哪种看你的需求啦！

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