Html 将表格单元格一个接一个地堆叠起来

在HTML表格中，我希望第二个和第三个单元格以及第四个和第五个单元格都位于彼此的上方，但第一个单元格必须占据整行的高度

如何使用CSS实现这一点（我无法更改html标记）

table.shop\u table\u响应性t车身tr.cart\u物品td.product-name，
table.shop\ table\车身tr.cart\项目td.产品数量，
table.shop\ table\车身tr.cart\项目td.product-小计，
table.shop\u table\u responsive t车身tr.cart\u项目td.product-remove{
显示：块；
}
table.shop\u table\u响应式车身tr.cart\u项目td.product-thumbnail{
最大宽度：92px；
}
table.shop\u table\u响应式车身tr.cart\u物料td.product-name{
最小宽度：170px；
}

亨利·哈里斯通数量酒店
70欧元

要执行所需操作，需要更改表行的

显示。您可以使用flex或grid进行此操作。下面我演示了如何使用grid，列的固定宽度为33%，但将其更改为“322px auto auto”将允许缩略图的宽度正确，其他列将自动调整。通过使用网格，我通过使用
Grid xxx start/end
属性指定了各种单元格的显示位置


table.shop\u table\u响应式车身tr.cart\u项目{
显示：网格；
网格模板行：50fr 50fr；
网格模板列：33fr 33fr 33fr；
}
table.shop\u table\u响应式车身tr.cart\u项目td.product-thumbnail{
最大宽度：92px；
网格行开始：1；
网格行端：3；
网格列开始：1；
网格柱端：2；
}
table.shop\ table\车身tr.cart\项目td.产品数量{
网格行开始：2；
网格行端：3；
网格列开始：2；
网格柱端：3；
}
table.shop\u table\u响应式车身tr.cart\u物料td.product-name{
最小宽度：170px；
}

1.
2.
3.
亨利·哈里斯通数量酒店
4.
70欧元
5.
好的，这正是我所需要的，对于那些感兴趣的人，你可以通过这种方式实现，使用
flexbox
，设置行的高度，使用
flex-direction:column
和
flex-wrap:wrap如下所示：


.box{
高度：300px；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
}
.box>*{
flex:1自动；
边框：1px纯黑；
}
.包厢一区{
高度：300px；
}
.包厢第二分区，
.包厢第三分区，
.包厢第四分区，
.包厢第五分区
{
高度：148px；
}

一个
两个
三
四
五
六
七
八
九
十
请提供一些css。你真的需要和桌子在一起吗？只是需要。我无法更改标记。3和4的大小是否完全相同？如果是这样，您可以使用
position:relative
，甚至
transform:translate（100%，-100%）No 3和No 4不需要相同大小的“我不能更改html”-不能-或者只是不想？（当然，WooCommerce也允许定制购物车输出；编辑模板并不是一件简单的事情，有些事情需要通过挂钩/过滤器来完成。）感谢您的回答，这是一个解决方案。