如何用HTML和CSS实现打印时页眉在页面交替左右显示？

要实现打印时奇偶页页眉（公司Logo）左右交替的效果，核心是利用CSS的打印媒体查询与@page伪类区分奇偶页面，配合thead的重复表头特性完成布局。以下是具体实现方案：

核心思路 #

1. 用@media print针对打印场景设置专属样式
2. 通过@page :right（对应奇数页，如第1、3页）和@page :left（对应偶数页，如第2、4页）分别定义不同的页眉对齐规则
3. 确保thead以table-header-group形式渲染，保证每页都显示页眉

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>奇偶页打印页眉示例</title>
    <style>
        /* 基础样式 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.8;
            margin: 0;
            padding: 20px;
        }
        .logo-wrapper {
            width: 100%;
            padding: 10px 0;
        }
        .company-logo {
            width: 160px;
            height: auto;
        }
        /* 强制thead每页重复 */
        thead {
            display: table-header-group;
        }

        /* 打印专属样式 */
        @media print {
            /* 奇数页（右侧页面）：Logo居左 */
            @page :right {
                margin: 2cm; /* 预留页眉空间 */
            }
            @page :right .logo-wrapper {
                text-align: left;
            }

            /* 偶数页（左侧页面）：Logo居右 */
            @page :left {
                margin: 2cm;
            }
            @page :left .logo-wrapper {
                text-align: right;
            }

            /* 避免正文与页眉重叠 */
            body {
                margin-top: 3cm;
                padding: 0;
            }

            /* 隐藏打印按钮 */
            button {
                display: none;
            }
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td class="logo-wrapper">
                    <img src="your-logo-path.png" alt="公司Logo" class="company-logo">
                </td>
            </tr>
        </thead>
        <tbody>
            <!-- 添加足够多的内容以触发分页 -->
            <tr><td>第1行内容</td></tr>
            <tr><td>第2行内容</td></tr>
            <tr><td>第3行内容</td></tr>
            <!-- 重复添加更多行，确保内容至少跨两页 -->
            <!-- 省略大量内容行... -->
        </tbody>
    </table>
    <button onclick="window.print()">预览打印效果</button>
</body>
</html>

关键细节说明 #

• 页面对应关系：@page :right对应书籍排版中的右侧页面（即奇数页码），@page :left对应左侧页面（偶数页码），符合常规打印的奇偶页逻辑
• 页眉重复机制：thead的display: table-header-group是浏览器默认支持的表头重复渲染属性，无需额外JS即可实现每页显示页眉
• 兼容性：主流浏览器（Chrome、Firefox、Edge）均支持@page的:left/:right伪类，测试时需在打印预览中查看效果
• 间距调整：通过@page的margin和body的margin-top避免页眉与正文内容重叠，可根据实际Logo尺寸调整数值

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