css如何在表格中合并单元格

在CSS中，虽然直接内联样式可以控制表格单元格的合并，但这不是标准的做法，因为HTML5规范推荐使用更现代的方式来处理复杂布局，例如`<th>`标签或CSS Grid和Flexbox。然而，如果需要在一个传统的`<table>`中合并单元格，可以借助`colspan`和`rowspan`属性来实现。

例如，如果你想合并两行两列的单元格，可以这样做：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td colspan="2">合并后的单元格（跨越两列）</td>
  </tr>
  <tr>
    <td></td> <!-- 空白单元格，用于合并 -->
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
</table>

然后，为了保持美观，你需要使用CSS来调整边距和对齐：

table, th, td {
  border-collapse: collapse; /* 合并边框 */
  padding: 8px;
}

/* 如果你想让合并后的单元格水平居中 */
td[colspan] {
  text-align: center;
}

请注意，这种方法可能导致表格布局难以维护，特别是在响应式设计中。所以，除非必要，尽量避免过多地使用`colspan`和`rowspan`。