[分享]css3合并单元格

CSS3合并单元格技术可以帮助我们快速地实现表格单元格的合并，减少页面中的冗余信息，提高页面的可读性和美观度。table { bordercollapse: collapse; /合并边框/ } td...

CSS3合并单元格技术可以帮助我们快速地实现表格单元格的合并，减少页面中的冗余信息，提高页面的可读性和美观度。

table {
  border-collapse: collapse; /*合并边框*/
}

td, th {
  border: 1px solid black; /*表格边框*/
  padding: 10px; /*单元格内边距*/
}

/*合并单元格*/
td[colspan="2"], th[colspan="2"] {
  text-align: center;
  background-color: gray;
}

td[rowspan="2"],
th[rowspan="2"] {
  vertical-align: middle;
  background-color: yellow;
} 

上面的代码是一个简单的实现表格单元格合并的示例。其中，colspan属性用于水平合并单元格，rowspan属性用于垂直合并单元格。它们的值为要合并的单元格数量。

注意，在合并单元格的时候，被合并的单元格中的内容只会展示一次，而不是被拷贝到其他单元格。

此外，可以通过CSS样式来美化合并后的单元格，例如设置背景颜色、文字居中对齐等。