如何实现响应式HTML表格：桌面原样显示，移动端每行重复表头

没问题，这个需求可以通过CSS媒体查询结合伪元素轻松实现，不用额外JS，还能保留表格的语义化结构。下面是完整的解决方案：

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Table</title>
    <style>
        /* 桌面端基础表格样式 */
        .responsive-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 1em;
            font-family: sans-serif;
            min-width: 400px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }

        .responsive-table thead tr {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
        }

        .responsive-table th,
        .responsive-table td {
            padding: 12px 15px;
            border: 1px solid #dddddd;
        }

        .responsive-table tbody tr {
            border-bottom: 1px solid #dddddd;
        }

        .responsive-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .responsive-table tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }

        /* 移动端响应式适配 */
        @media (max-width: 768px) {
            /* 隐藏桌面端横向表头 */
            .responsive-table thead {
                display: none;
            }

            /* 让每行数据变成独立的卡片式区块 */
            .responsive-table tbody tr {
                display: block;
                margin-bottom: 15px;
                border: 1px solid #ddd;
            }

            /* 单元格改为flex布局，实现表头+数据的横向排列 */
            .responsive-table tbody td {
                display: flex;
                justify-content: space-between;
                padding: 12px 15px;
                text-align: right;
                border-bottom: 1px solid #ddd;
            }

            /* 用伪元素读取data-label属性，显示对应表头文本 */
            .responsive-table tbody td::before {
                content: attr(data-label);
                font-weight: bold;
                color: #009879;
                text-align: left;
                flex: 1;
                margin-right: 10px;
            }

            .responsive-table tbody tr:last-child td:last-child {
                border-bottom: none;
            }
        }
    </style>
</head>
<body>
    <table class="responsive-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="ID">1</td>
                <td data-label="Name">Jake</td>
                <td data-label="Age">23</td>
            </tr>
            <tr>
                <td data-label="ID">2</td>
                <td data-label="Name">Dave</td>
                <td data-label="Age">45</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

关键实现细节说明 #

• 语义化保留：没改动原表格的thead/tbody/tr/td结构，仅给每个td加了data-label属性存储对应表头文本，确保表格的可访问性和语义完整性。
• 桌面端美化：添加了表头背景色、行交替色、阴影等样式，让表格在桌面端更美观专业。
• 移动端适配逻辑：
  1. 隐藏桌面端的横向表头，避免冗余
  2. 将每行数据转为块级元素，变成独立的“信息卡片”
  3. 单元格用flex布局，通过伪元素调用data-label内容作为行内表头，实现「表头 | 数据」的纵向展示效果
  4. 调整文本对齐和间距，让移动端布局更清晰易读

你可以根据需求修改颜色、字体或者移动端断点（比如把max-width:768px改成你需要的阈值），这个方案完全匹配你要的桌面/移动端双布局需求。

内容的提问来源于stack exchange，提问作者Teshan N.