CSS合并单元格四种方式：table/display/flex/grid

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

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

方式三：display: flex

方式四：display: grid

效果图：

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

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

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

边框设置：th/td 加右下边框，table加左上边框。

<!--html-->
<table border="0" cellspacing="0" cellpadding="0"><tr><th style="width: 100px;">种类</th><th style="width: 100px;">名称</th><th>描述</th></tr><tr><td rowspan="2">水果</td><td>香蕉</td><td>香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</td></tr><tr><td>苹果</td><td>苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</td></tr><tr><td colspan="2">其他</td><td>--</td></tr>
</table><!--css-->
<style>table {width: 600px;table-layout: fixed;border-left: 1px solid #ddd;border-top: 1px solid #ddd;}th, td {border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;vertical-align: middle;text-align: center;padding: 12px 0;color: #666;font-size: 14px;}th {font-weight: normal;}
</style>

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

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

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

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

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

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

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

<div><div class="distable border-sub-rb border-lt"><div class="distable-cell1">种类</div><div class="distable-cell1">名称</div><div class="distable-cell2">描述</div></div><div class="distable border-l"><div class="distable-cell1 border-rb" style="background-color: #ddd;border-color: red">水果</div><div class="distable-cell3"><div class="distable border-sub-rb"><div class="distable-cell1">香蕉</div><div class="distable-cell2">香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</div></div><div class="distable border-sub-rb"><div class="distable-cell1">苹果</div><div class="distable-cell2">苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</div></div></div></div><div class="distable border-r"><div class="distable-cell4 border-lb">其他</div><div class="distable-cell2 border-bl" style="background-color: #ddd;border-color: red">--</div></div>
</div><style>.distable {display: table;color: #666;font-size: 14px;box-sizing: border-box;}[class*=distable-cell] {display: table-cell;text-align: center;vertical-align: middle;box-sizing: border-box;}.distable-cell1 {width: 100px;}.distable-cell2 {width: 400px;padding: 12px 0;}.distable-cell3 {width: 500px;}.distable-cell4 {width: 200px;}.border-sub-rb [class*=distable-cell] {border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 12px 0;}.border-lt {border-left: 1px solid #ddd;border-top: 1px solid #ddd;}.border-lb {border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;}.border-l {border-left: 1px solid #ddd;}.border-rb {border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;}.border-bl {border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;}.border-r {border-right: 1px solid #ddd;}
</style>

方式三：display: flex

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

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

2）边框的设置：设置比较复杂，容易错位。

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

<div style="width: 600px;"><div class="flex-box border-sub-rb border-lt"><div class="flex-cell1">种类</div><div class="flex-cell1">名称</div><div class="flex-cell2">描述</div></div><div class="flex-box border-l"><div class="flex-cell1 border-b flex-cc" style="background-color: #ddd;border-color: red"><div>水果</div></div><div class="flex-cell3 border-r"><div class="flex-box border-sub-bl"><div class="flex-cell1 flex-cc"><div>香蕉</div></div><div class="flex-cell2 flex-cc" style="background-color: #ddd;border-color: red"><div>香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</div></div></div><div class="flex-box border-sub-bl"><div class="flex-cell1 flex-cc"><div>苹果</div></div><div class="flex-cell2 flex-cc"><div>苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</div></div></div></div></div><div class="flex-box"><div class="flex-cell4 border-lb flex-cc"><div>其他</div></div><div class="flex-cell2 border-rbl flex-cc" style="background-color: #ddd;border-color: red"><div>--</div></div></div>
</div><style>.flex-box {display: flex;flex-direction: row;flex-wrap: nowrap;color: #666;font-size: 14px;text-align: center;box-sizing: border-box;}[class*=flex-cell] {box-sizing: border-box;}.flex-cell1 {width: 100px;}.flex-cell2 {width: 400px;padding: 12px 0;}.flex-cell3 {width: 500px;}.flex-cell4 {width: 200px;}.border-sub-rb [class*=flex-cell] {border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 12px 0;}.border-sub-bl [class*=flex-cell] {border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;}.border-lt {border-left: 1px solid #ddd;border-top: 1px solid #ddd;}.border-lb {border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;}.border-l {border-left: 1px solid #ddd;}.border-rbl {border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;}.border-b {border-bottom: 1px solid #ddd;}.border-r {border-right: 1px solid #ddd;}.flex-cc {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;}
</style>

方式四：display: grid

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

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

<div class="container"><div class="item item-1"><div>种类</div></div><div class="item item-2"><div>名称</div></div><div class="item item-3"><div>描述</div></div><div class="item item-4"><div>水果</div></div><div class="item item-5"><div>香蕉</div></div><div class="item item-6"><div>香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</div></div><div class="item item-7"><div>苹果</div></div><div class="item item-8"><div>苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</div></div><div class="item item-9"><div>其他</div></div><div class="item item-10"><div>--</div></div>
</div><style>.container {display: grid;grid-template-columns: repeat(6, 100px);color: #666;font-size: 14px;border-left: 1px solid #ddd;border-top: 1px solid #ddd;}.item {border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;text-align: center;padding: 12px 0;display: grid;align-items: center;}.item-1 {grid-column: 1 / 2;}.item-2 {grid-column: 2 / 3;}.item-3 {grid-column: 3 / 7;}.item-4  {grid-row: 2 / 4}.item-6 {grid-column: 3 / 7;}.item-8 {grid-column: 3 / 7;}.item-9 {grid-column: 1 / 3;}.item-10 {grid-column-end: span 4;}
</style>

总结：

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

The End