css table列合并单元格合并

CSS中的表格列合并指的是将表格中的相邻列进行合并，使它们变成一列，从而缩小表格宽度，提高表格的美观性和可读性。通过CSS的table-layout属性，可以进行表格列宽的设置和表格列合并的操作。

/* 设置表格宽度为自动调整 */
table {
  table-layout: auto;
}

/* 将第一列和第二列合并 */
th:first-child,td:first-child {
  width: 150px;
}

td:first-child + td {
  width: 200px;
}

/* 合并第三列和第四列 */
th:nth-child(3),td:nth-child(3) {
  display: none;
}

td:nth-child(3) + td {
  width: 250px;
}

在上面的代码中，我们首先设置了表格的宽度为自动调整，即表格宽度会根据内容的多少自适应调整。然后，在第一列和第二列中间添加了一个宽度为200px的空白列，实现了将第一列和第二列合并的效果。而在第三列和第四列中，则是将第三列隐藏，并在第三列和第四列之间添加了一个宽度为250px的空白列，实现了将第三列和第四列合并的效果。

总的来说，表格列合并功能可以让我们更加灵活地控制表格的宽度和结构，提高表格的美观度和可读性，是我们在前端开发中不可或缺的重要实用特性。