[分享]css两行合并单元格合并

在网页设计中，合并单元格是常用的一种操作，特别是在制作表格时。通过合并单元格，可以使表格更加整洁美观。下面我们来介绍两种利用CSS合并单元格的方法：CSS方法1：使用bordercollapsetab...

在网页设计中，合并单元格是常用的一种操作，特别是在制作表格时。通过合并单元格，可以使表格更加整洁美观。下面我们来介绍两种利用CSS合并单元格的方法：

CSS方法1：使用border-collapse

table{
   border-collapse:collapse;
}
td{
   border:1px solid #c9c9c9;
}
td.col{
   border-top:none;
   border-bottom:none;
}
td.row{
   border-left:none;
   border-right:none;
} 

通过设置table的border-collapse为collapse，将相邻的边框合并。接着设置想要合并的单元格为.col或.row类，分别将其上下或左右边框去掉，实现单元格合并。

CSS方法2：使用grid布局

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 1px;
}

.grid-item {
  padding: 20px;
  border: 1px solid #c9c9c9;
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
} 

使用grid布局，通过设置grid-column和grid-row来控制单元格的跨度，实现单元格合并。

以上两个方法在合适的场合下都可以非常好的实现单元格合并，但需要根据实际情况选择合适的方法。