如何使用样式化组件- React来分隔表中的跨度

npx create-react-app my-app
cd my-app
npm start

import React from 'react';

const Table = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
        </tr>
        <tr>
          <td>Cell 4</td>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
      </tbody>
    </table>
  );
};

export default Table;

import React from 'react';
import styled from 'styled-components';

const StyledTable = styled.table`
  /* 样式定义 */
`;

const Table = () => {
  return (
    <StyledTable>
      {/* 表格内容 */}
    </StyledTable>
  );
};

export default Table;

import React from 'react';
import styled from 'styled-components';

const StyledTable = styled.table`
  /* 样式定义 */
`;

const Table = () => {
  return (
    <StyledTable>
      <thead>
        <tr>
          <th>Header 1</th>
          <th colSpan="2">Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell 1</td>
          <td colSpan="2">Cell 2 and Cell 3</td>
          <td>Cell 4</td>
        </tr>
        <tr>
          <td colSpan="3">Cell 5, Cell 6, and Cell 7</td>
          <td>Cell 8</td>
        </tr>
      </tbody>
    </StyledTable>
  );
};

export default Table;