如何用CSS堆叠表格中的最后两个td单元格？

实现思路 #

借助CSS Grid布局，无需修改原有HTML结构，只需将表格行设置为网格容器，指定列布局后，让最后两个单元格占据同一列，即可实现垂直堆叠效果。

完整代码示例 #

HTML（保持原结构）

<table>
    <tr>
        <td>Billy</td>
        <td>86</td>
        <td>4.1</td>
        <td>36c</td>
    </tr>
    <tr>
        <td>Jimmy</td>
        <td>99</td>
        <td>4.9</td>
        <td>88d</td>
    </tr>
</table>

CSS 样式

/* 调整表格单元格间距，避免边框合并影响布局 */
table {
    border-collapse: separate;
    border-spacing: 1.5rem 0.5rem;
}

/* 将表格行设置为网格布局，定义三列结构 */
tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
}

/* 让第3、4个单元格占据同一列，自动垂直堆叠 */
tr td:nth-child(3),
tr td:nth-child(4) {
    grid-column: 3;
}

效果说明 #

• 前两个单元格保持水平排列，各自自适应内容宽度
• 每行最后两个单元格自动在第三列垂直堆叠，间距由border-spacing控制
• 可根据需求调整border-spacing、grid-template-columns的值来适配不同布局需求

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