css样式合并（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