目录

方式一:table【最简单写法】

方式二:display: table--不推荐

方式三:display: flex

方式四:display: grid

效果图:

方式一:table【最简单写法】

colspan:规定单元格可横跨的列数。rowspan:规定单元格可横跨的行数。

通过table的colspan和rowspan轻松实现单元格合并。

边框设置:th/td 加右下边框,table加左上边框。

种类名称描述
水果香蕉香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...
苹果苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...
其他--

方式二:display: table--不推荐

外层div.distable设置样式display: table;

内层div.distable-cell*设置样式display: table-cell;

table布局下,可以实现合并单元格效果。有两点说明:

1)为合并单元格的行 设置边框时,比较复杂,容易错位。

2)浏览器缩放到200+%展示时,此布局会变形。

因此,这种写法并不推荐。

种类

名称

描述

水果

香蕉

香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...

苹果

苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...

其他

--

方式三:display: flex

flex布局下,可以实现合并单元格效果。有两个难点:

1)合并单元格的垂直居中效果:flex布局嵌套,内层的flex设置align-items: center;

2)边框的设置:设置比较复杂,容易错位。

虽然可以实现合并单元格效果,并不推荐。

种类

名称

描述

水果

香蕉

香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...

苹果

苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...

其他

--

方式四:display: grid

grid布局学习成本会高一些,但代码看着最清晰。

grid有兼容性问题,谨慎使用。

种类

名称

描述

水果

香蕉

香蕉(学名:Musa nana Lour.)是芭蕉科、芭蕉属植物。植株丛生,具匐匍茎,矮型的高3.5米以下,一般高不及2米...

苹果

苹果(Malus pumila Mill.),是落叶乔木,通常树木可高至15米,但栽培树木一般只高3-5米左右...

其他

--

总结:

table布局仍是实现合并单元格最简单的方式,grid次之,flex再次,display:table不推荐。

The End

查看原文