目录
方式一：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
大家都在看：
发表评论