如何在semantic-ui-react中像HTML表格那样合并单元格？

嘿，我来帮你搞定这个问题！其实semantic-ui-react的Table组件原生就支持类似HTML colspan的功能，只是需要用对属性和写法，我给你一步步讲清楚：

核心用法：给Table.Cell/Table.HeaderCell加colSpan属性 #

不管是普通内容单元格还是表头单元格，都可以直接在对应的组件上添加驼峰命名的colSpan属性，属性值就是你要合并的列数，逻辑和原生HTML的colspan完全一致。

示例1：内容单元格合并 #

下面是一个完整的可运行示例，其中一行的单元格跨3列展示：

import { Table } from 'semantic-ui-react';

const MergedCellTable = () => (
  <Table celled striped>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>列A</Table.HeaderCell>
        <Table.HeaderCell>列B</Table.HeaderCell>
        <Table.HeaderCell>列C</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        {/* 这个单元格合并3列，同时设置居中对齐 */}
        <Table.Cell colSpan={3} textAlign="center">
          这是跨3列的合并单元格
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>常规数据1</Table.Cell>
        <Table.Cell>常规数据2</Table.Cell>
        <Table.Cell>常规数据3</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
);

export default MergedCellTable;

示例2：表头单元格合并 #

如果需要合并表头单元格，直接在Table.HeaderCell上使用colSpan即可：

<Table.Header>
  <Table.Row>
    <Table.HeaderCell colSpan={2}>合并表头（覆盖列A+列B）</Table.HeaderCell>
    <Table.HeaderCell>列C</Table.HeaderCell>
  </Table.Row>
  <Table.Row>
    <Table.HeaderCell>子列A1</Table.HeaderCell>
    <Table.HeaderCell>子列A2</Table.HeaderCell>
    <Table.HeaderCell>子列C1</Table.HeaderCell>
  </Table.Row>
</Table.Header>

常见坑点排查 #

如果你之前尝试没成功，大概率是踩了这些坑：

• 属性名写错：必须是驼峰式的colSpan，不是小写的colspan，React组件属性统一用驼峰命名
• 属性加错组件：要直接把colSpan加在Table.Cell或Table.HeaderCell上，别加到外层的Table.Row或其他组件
• 列数不匹配：确保同一行内所有单元格的colSpan总和等于表格的总列数，否则会出现布局错乱
• 样式冲突：如果表格用了celled样式，合并后的单元格可能会保留多余边框，你可以自定义CSS调整：

/* 移除合并单元格的右侧边框 */
.ui.table .merged-cell {
  border-right: none !important;
}

然后给对应的Table.Cell加上className="merged-cell"即可。

内容的提问来源于stack exchange，提问作者KitKarson