[Table] 表格表头吸顶，表头计算宽度逻辑有问题

[dxFlue]

tdesign-react 版本

1.15.6

重现链接

https://codesandbox.io/p/sandbox/7pkgnn

重现步骤

1.切换 table-layout 然后点选是否冻结首尾两行，表格头样式异常

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions[bot]]

👋 @dxFlue，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[dxFlue]

[dxFlue]

[dxFlue]

1.15.1 版本没有问题，是修复 #3792 引发的问题

[RylanBot]

我这里没复现出来你的截图，你是 Windows 系统的？

[dxFlue]

Win11 Chrome 141.0.7390.66 @RylanBot

[dxFlue]

@RylanBot 我的测试连接错了，你打开之后加上这俩处，你再试试

[RylanBot]

可复现...我排查一下原因（但测了一下，我回退到 1.14.x 版本也有这个问题...应该不是最新版本的修复导致）

完整 DEMO 存档

import React, { useState } from 'react';
import { CheckCircleFilledIcon, CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
import { Checkbox, Link, Radio, Space, Table, Tag } from 'tdesign-react';

import type { TableProps } from 'tdesign-react';

const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const data: TableProps['data'] = [];

const statusNameListMap = {
  0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
  1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
  2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
};

for (let i = 0; i < 20; i++) {
  data.push({
    index: i,
    applicant: ['贾明', '张三', '王芳'][i % 3],
    status: i % 3,
    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
    detail: {
      email: ['[email protected]', '[email protected]', '[email protected]'][i % 3],
    },
    matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
  });
}

export default function TableFixedColumn() {
  const [tableLayout, setTableLayout] = useState<TableProps['tableLayout']>('auto');
  const [fixedTopAndBottomRows, setFixedTopAndBottomRows] = useState(false);
  // <!-- 如果希望表格列宽自适应，设置 `table-layout: auto` 即可。需同时设置 table-content-width -->
  // <!-- fixedRows: [2, 2] 表示冻结表格的头两行和尾两行 -->
  // <!-- footData 可以是多行，均支持固定在底部 -->
  const table = (
    <Table
      bordered
      data={data}
      footData={[{}]}
      tableLayout={tableLayout}
      tableContentWidth={tableLayout === 'fixed' ? undefined : '1600px'}
      maxHeight={fixedTopAndBottomRows ? 500 : 300}
      fixedRows={fixedTopAndBottomRows ? [2, 2] : undefined}
      headerAffixedTop={{
        container: '.tester',
        zIndex: 999,
        offsetTop: 0,
      }}
      columns={[
        {
          colKey: 'applicant',
          title: '申请人',
          width: '100',
          foot: '共20条',
          fixed: 'left',
        },
        {
          colKey: 'status',
          title: '审批状态',
          width: '150',
          foot: '-',
          cell: ({ rowIndex }) => {
            const status = rowIndex % 3;
            return (
              <Tag
                shape="round"
                theme={statusNameListMap[status].theme}
                variant="light-outline"
                icon={statusNameListMap[status].icon}
              >
                {statusNameListMap[status].label}
              </Tag>
            );
          },
        },
        { colKey: 'channel', title: '签署方式' },
        { colKey: 'matters', title: '申请事项', width: '150', foot: '-' },
        { colKey: 'detail.email', title: '邮箱地址' },
        { colKey: 'createTime', title: '申请日期', width: '120', foot: '-' },
        {
          colKey: 'operation',
          title: '操作',
          width: '150',
          foot: '-',
          fixed: 'right',
          cell: ({ row }) => (
            <Link theme="primary" hover="color">
              {row.status === 0 ? '查看详情' : '再次申请'}
            </Link>
          ),
        },
      ]}
      rowKey="index"
      lazyLoad
    />
  );

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      <RadioGroup
        value={tableLayout}
        variant="default-filled"
        onChange={(val: TableProps['tableLayout']) => setTableLayout(val)}
      >
        <RadioButton value="fixed">table-layout: fixed</RadioButton>
        <RadioButton value="auto">table-layout: auto</RadioButton>
      </RadioGroup>
      <Checkbox value={fixedTopAndBottomRows} onChange={setFixedTopAndBottomRows}>
        是否冻结首尾两行
      </Checkbox>
      <div className="tester">{table}</div>
    </Space>
  );
}

[RylanBot]

1.16.0 已尝试修复