如何让响应式HTML表格中单行实现全屏堆叠显示？

问题描述 #

需要让HTML表格中带有.firstrow类的单行单元格堆叠显示且占满容器宽度，但仅设置该tr下的td为display:block时，td宽度会被表格的列布局限制，只能占普通单元格的宽度；若给所有td设置display:block则会影响其他行，不符合需求。

原始代码 #

HTML代码

<table>
    <tbody>
        <tr class="firstrow">
            <td colspan="2">Description 1</td>
            <td colspan="2">Content 1</td>
        </tr>
        <tr>
            <td>Description 2</td>
            <td>Content 2</td>
        </tr>
        <tr>
            <td>Description 3</td>
            <td>Content 3</td>
        </tr>
    </tbody>
</table>

CSS代码

table {
    width: 100%;
    border: 1px grey solid;
}
table td {
    border: 1px lime solid;
}
table .firstrow td {
    display: block;
}

解决方案 #

核心是让目标行脱离表格的默认列布局流，转换为块级容器，同时让内部单元格占满容器宽度。修改后的CSS代码如下：

table {
    width: 100%;
    border: 1px grey solid;
}
table td {
    border: 1px lime solid;
}
/* 关键修改部分 */
table .firstrow {
    display: block;
    width: 100%;
}
table .firstrow td {
    display: block;
    width: 100%;
    box-sizing: border-box; /* 避免边框导致宽度溢出 */
}

原理说明 #

• 将.firstrow设置为display:block，使其脱离表格的行布局约束，成为独立的块级容器。
• 给.firstrow下的td设置width:100%，确保每个单元格占满父容器宽度，实现堆叠效果。
• box-sizing:border-box让td的边框包含在宽度计算内，避免出现横向溢出。

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