feat: table update style

[bestlyg]

Types of changes

• New feature
• Bug fix
• Enhancement
• Documentation change
• Coding style change
• Component style change
• Refactoring
• Test cases
• Continuous integration
• Typescript definition change
• Breaking change
• Others

Background and context

Solution

How is the change tested?

Changelog

Component	Changelog(CN)	Changelog(EN)	Related issues
table	修复异常边框

Checklist:

• Test suite passes (npm run test)
• Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
• Changes are submitted to the appropriate branch (e.g. features should be submitted to feature branch and others should be submitted to main branch)

Other information

复现Demo：

import "@arco-design/web-react/dist/css/arco.css";

import React from "react";
import {
  Table,
  TableColumnProps,
  ConfigProvider,
} from "@arco-design/web-react";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    fixed: "left",
    width: 140,
  },
  {
    title: "Address",
    dataIndex: "address",
  },
  {
    title: "Email",
    dataIndex: "email",
  },
  {
    title: "Other",
    dataIndex: "other",
    render: () => "Other",
  },
  {
    title: "Other 1",
    dataIndex: "other1",
    render: () => "Other 1",
  },
  {
    title: "Other 2",
    dataIndex: "other2",
    render: () => "Other 2",
  },
  {
    title: "Salary",
    dataIndex: "salary",
    fixed: "right",
    width: 120,
  },
];
const data = [
  {
    key: "1",
    name: "Jane Doe",
    salary: 23000,
    address: "32 Park Road, London",
    email: "jane.doe@example.com",
  },
  {
    key: "2",
    name: "Alisa Ross",
    salary: 25000,
    address: "35 Park Road, London",
    email: "alisa.ross@example.com",
  },
  {
    key: "3",
    name: "Kevin Sandra",
    salary: 22000,
    address: "31 Park Road, London",
    email: "kevin.sandra@example.com",
  },
  {
    key: "4",
    name: "Ed Hellen",
    salary: 17000,
    address: "42 Park Road, London",
    email: "ed.hellen@example.com",
  },
  {
    key: "5",
    name: "William Smith",
    salary: 27000,
    address: "62 Park Road, London",
    email: "william.smith@example.com",
  },
];

export const App = () => {
  const [rtl, setRtl] = React.useState(false);
  return (
    <ConfigProvider rtl={rtl}>
      <button onClick={() => setRtl(!rtl)}>change rtl</button>
      <Table
        columns={columns}
        data={data}
        expandedRowRender={(record) =>
          `${record.name}'s address is ${record.address}`
        }
        rowSelection={{}}
        scroll={{
          x: 1600,
        }}
        border={
          {
            // wrapper: true,
            // headerCell: true,
            // bodyCell: true,
            // cell: true,
          }
        }
      />
    </ConfigProvider>
  );
};
export default App;

复现步骤：

1. 仅开启border中的cell:true,滚动的时候左侧投影和边框正常，右侧多了一条边框

2. 仅开启border中的headerCell:true，滚动的时候，右侧边框的header有边框，body无边框，看起来没有对齐一样

3. 同2，仅开启border中的bodyCell:true，滚动的时候，右侧边框的body有边框，header无边框，看起来没有对齐一样

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[github-actions]

Prepare preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.