[分享]css上下单元格合并

CSS中，通过设置表格单元格的样式来实现上下单元格合并。这种技术在表格布局中非常常见，可以使表格更加美观和易读。/ 合并上下单元格 / table { bordercollapse: collapse...

CSS中，通过设置表格单元格的样式来实现上下单元格合并。这种技术在表格布局中非常常见，可以使表格更加美观和易读。

/* 合并上下单元格 */
table {
  border-collapse: collapse;  /* 合并表格边框 */
}

td {
  border: 1px solid black;   /* 设置单元格边框 */
}

td.rowspan {
  vertical-align: top;   /* 上对齐 */
}

/* 给需要合并的单元格添加一个类名 */
<td class="rowspan" rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr> 

在上面的代码中，我们首先使用了CSS的border-collapse属性来合并表格边框。然后设置了所有单元格的边框为1像素的实线边框。接着，我们给需要合并的单元格添加了一个类名，这里我们将第一行第一列的单元格合并为一个单元格，其他单元格保持不变。最后，我们设置了这个单元格的vertical-align属性为top，让它与下面的单元格上对齐。

通过这样的设置，我们就可以实现上下单元格的合并了。这是一种非常简单和有效的表格布局技术，可以用来处理很多复杂的表格布局问题。