静态双语文本HTML布局：如何实现单语言隐藏与分栏调整？

实现方案说明 #

基于你现有的table布局，通过原生CSS+JS即可实现需求，无需外部依赖，完全支持离线使用：

1. 给对应语言的单元格添加统一类名，方便批量控制显示/隐藏
2. 顶部添加切换按钮，通过JS控制类的显示状态
3. 优化table样式，确保滚动时段落始终对齐

完整离线HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双语对照阅读</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }
        /* 控制栏样式 */
        .control-bar {
            padding: 10px 20px;
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .control-bar button {
            padding: 6px 12px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: white;
            cursor: pointer;
        }
        .control-bar button.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        /* 章节分隔线 */
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #eee;
        }
        /* 双语表格样式 */
        .bilingual-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 20px;
            margin-bottom: 10px;
        }
        .bilingual-table td {
            vertical-align: top;
            width: 50%;
            line-height: 1.6;
            font-size: 16px;
        }
        /* 列隐藏类 */
        .cn-hidden {
            display: none !important;
        }
        .en-hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <!-- 控制按钮栏 -->
    <div class="control-bar">
        <button id="show-both" class="active">显示双语</button>
        <button id="show-cn">仅显示中文</button>
        <button id="show-en">仅显示英文</button>
    </div>

    <!-- 第一章内容 -->
    <table class="bilingual-table">
        <tr>
            <td class="cn-col">这是第一段中文内容，用于测试双语对齐效果。这段文字需要足够长，才能看出滚动时的对齐情况，确保中英文段落始终保持在同一水平位置。</td>
            <td class="en-col">This is the first English paragraph for testing bilingual alignment. The text needs to be long enough to see the alignment during scrolling, ensuring that Chinese and English paragraphs always stay at the same horizontal position.</td>
        </tr>
        <tr>
            <td class="cn-col">这是第二段中文内容，继续测试滚动对齐。即使内容长度不同，表格布局也能保证对应段落的顶部始终对齐，因为每个段落都放在单独的tr中。</td>
            <td class="en-col">This is the second English paragraph, continuing to test scrolling alignment. Even if the content lengths are different, the table layout ensures that the tops of corresponding paragraphs are always aligned because each paragraph is placed in a separate tr.</td>
        </tr>
    </table>
    <hr>

    <!-- 第二章内容 -->
    <table class="bilingual-table">
        <tr>
            <td class="cn-col">第二章的第一段中文内容，章节之间用水平线分隔，保持原有结构。滚动页面时，所有对应段落都会随着窗口滚动保持对齐，因为整个页面只有一个滚动条。</td>
            <td class="en-col">The first English paragraph of Chapter 2, with horizontal lines separating chapters to maintain the original structure. When scrolling the page, all corresponding paragraphs will stay aligned with the window scroll, as there is only one scroll bar for the entire page.</td>
        </tr>
    </table>

    <script>
        // 获取元素
        const showBothBtn = document.getElementById('show-both');
        const showCnBtn = document.getElementById('show-cn');
        const showEnBtn = document.getElementById('show-en');
        const cnCols = document.querySelectorAll('.cn-col');
        const enCols = document.querySelectorAll('.en-col');

        // 按钮点击事件处理
        function setActiveBtn(activeBtn) {
            [showBothBtn, showCnBtn, showEnBtn].forEach(btn => btn.classList.remove('active'));
            activeBtn.classList.add('active');
        }

        showBothBtn.addEventListener('click', () => {
            setActiveBtn(showBothBtn);
            cnCols.forEach(col => col.classList.remove('cn-hidden'));
            enCols.forEach(col => col.classList.remove('en-hidden'));
        });

        showCnBtn.addEventListener('click', () => {
            setActiveBtn(showCnBtn);
            cnCols.forEach(col => col.classList.remove('cn-hidden'));
            enCols.forEach(col => col.classList.add('en-hidden'));
        });

        showEnBtn.addEventListener('click', () => {
            setActiveBtn(showEnBtn);
            cnCols.forEach(col => col.classList.add('cn-hidden'));
            enCols.forEach(col => col.classList.remove('en-hidden'));
        });
    </script>
</body>
</html>

关键功能说明 #

• 单语言隐藏：通过给对应列添加/移除cn-hidden/en-hidden类，控制单元格的显示状态，原生CSS实现无需额外依赖
• 滚动对齐：保留原有table+tr结构，每个段落对应一行，确保滚动时中英文段落始终顶部对齐，仅使用页面默认滚动条
• 离线可用：所有代码均内嵌在HTML文件中，无外部资源请求，直接打开即可使用
• 章节分隔：保留原有<hr>分隔章节的方式，不破坏现有结构

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