如何仅用CSS实现表头居左、表头与表体单元格同行显示效果？

你的原有方案通过float和block布局无法实现表头单元格与对应表体单元格同行的效果——float会将整个thead和tbody区块分离，block元素又会独占一行，最终无法形成对应单元格的同行对齐。以下是两种纯CSS实现方案：

方案一：固定行数的表头侧排（适配固定行数据表） #

HTML（无需修改原有结构） #

<table>
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
    </tr>
    <tr>
        <td>Jon</td>
        <td>Doe</td>
        <td>Chief Executive Eater</td>
    </tr>
    </tbody>
</table>

CSS代码 #

/* 基础表格样式（优化视觉，可选） */
table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}

/* 小屏幕适配逻辑 */
@media (max-width: 360px) {
    table {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0;
    }

    /* 隐藏表头行，直接处理单个th */
    thead tr {
        display: none;
    }

    /* 每个th跨占对应行数的网格行（示例中tbody共2行，所以span 2） */
    th {
        grid-row: span 2;
        align-self: center;
    }

    /* 让tbody的tr不生成独立盒子，td直接成为grid子项 */
    tbody tr {
        display: contents;
    }

    /* 所有td填充到网格第二列，按顺序排列 */
    td {
        grid-column: 2;
    }
}

方案说明 #

• 用CSS Grid将表格转为两列布局（表头列+内容列）
• 表头单元格跨占对应行数的网格行，确保与对应列的所有表体单元格垂直对齐
• 需注意grid-row: span 2的数值要与tbody的行数保持一致

方案二：动态行数的标签-值配对（适配任意行数据表） #

如果表格行数不固定，可采用每个数据行搭配对应表头标签的方式，视觉上同样实现表头居左、内容同行的效果：

HTML（需给td添加data-label属性） #

<table>
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td data-label="First Name">James</td>
        <td data-label="Last Name">Matman</td>
        <td data-label="Job Title">Chief Sandwich Eater</td>
    </tr>
    <tr>
        <td data-label="First Name">Jon</td>
        <td data-label="Last Name">Doe</td>
        <td data-label="Job Title">Chief Executive Eater</td>
    </tr>
    </tbody>
</table>

CSS代码 #

/* 基础表格样式（优化视觉，可选） */
table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}

/* 小屏幕适配逻辑 */
@media (max-width: 360px) {
    table, thead, tbody, tr, th, td {
        display: block;
    }

    /* 隐藏原始表头 */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin: 0 0 1rem 0;
        border: 1px solid #ddd;
    }

    td {
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 50%;
    }

    /* 通过伪元素生成表头标签，居左显示 */
    td:before {
        content: attr(data-label);
        position: absolute;
        top: 0;
        left: 0;
        width: 45%;
        padding: 8px;
        font-weight: bold;
        background-color: #f2f2f2;
        border-right: 1px solid #ddd;
    }
}

方案说明 #

• 将所有表格元素转为块级，隐藏原始表头
• 利用data-label属性和伪元素，在每个td左侧生成对应的表头标签
• 无需固定行数，适配任意数量的数据行

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