1 背景

要改造现有的table组件，目前是这样的

改造前

1.1 需求

• 需要固定表头
• 需要固定第一列
• 滚动区域宽高可限制

1.2 确定参数形式

参考antd table-scroll

入参例子

2 用2个<table>

2.1 描述

使用两个table分别放置实际的header和body

2.2 滚动

2.2.1 一些问题

• <thead>和<tbody>无法设置高度，就无法用overflow:scroll 来让它滚动；
• <table>的整体设置高度会让表头和表内容一起滚动，没有办法固定住表头只滚动内容。

2.2.2 实现

为了让表头和表内容都可以滚动，需要用两个<table>分别包裹表头和表内容，如下

两个table
然后对包裹住表内容的那个table的外面那个div设定高度
样式示例
就有这个效果
分别可以滚动
为了美观把表头的滚动条用css去掉

一起滚动

• 目标：让表头和表内容一起滚
• 实现：使用onScroll事件，让表头和表内容的scrollLeft在滚动的时候保持一致
  代码
  效果

2.3 对齐

2.3.1 宽度调整

• 问题：现在虽然能同步滚动了，但是每列没有对上，需要处理宽度
• 实现：使用table-layout: fixed;，手动设置每列宽度

但是
这个table有两层的头，第二层头的<th>设置width是失效的，也就是说没办法直接修改th、td样式来让宽度保持一致。

• 解决：使用<colgroup>来设定列的宽度，可以根据自己的column来动态设置
  例如

function handleLength(width: string | number | undefined): string | undefined {
  return typeof width === 'number' ? `${width}px` : width;
}
  const ColGroup = React.useMemo(() => {
    const cols = [];
    if (onSelected) cols.push(<col style={{ width: '42px' }} key="first" />);

    headerGroups.forEach((item) => {
      // console.log('test', item);
      item.headers.forEach((head) => {
        if (head.width) cols.push(<col style={{ width: handleLength(head.width) }} />);
      });
    });
    return (
      <colgroup>
        {cols}
      </colgroup>
    );
  }, [headerGroups, onSelected]);

dom
效果

2.3.2 总宽度调整

• 问题：但是body所在的table因为多了一个滚动条宽度，所以两个table的宽度不一样，滚动条横向拖到尾部会出现不对齐的情况，如下
  示例
• 解决：给header加上这个多出来的滚动条宽度，宽度计算的代码如下：

const scrollbarWidth = () => {
    // thanks too https://davidwalsh.name/detect-scrollbar-width
    const scrollDiv = document.createElement('div')
    scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;')
    document.body.appendChild(scrollDiv)
    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
    document.body.removeChild(scrollDiv)
    return scrollbarWidth
}
  
export default scrollbarWidth

dom
效果

3 使用sticky

mui 文档

• 问题：上面那种办法必须指定每列的宽度，不然滚动的时候就对不齐了，table每列自适应还是很方便的。

在不考虑IE的情况下其实有更简单的办法：对<thead>设置position:sticky

dom

• 值得注意的是，在Firefox里如果给标签<thead>设置sticky，且使用了border-collapse: collapse,border会看不见，需要改成

  border-collapse: separate;
  border-spacing: 0;

完成效果如下

效果

下一篇：
多个固定列的React Table组件

Reference:
https://www.jianshu.com/p/1dbf8819c388
https://zhuanlan.zhihu.com/p/33280304
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
https://github.com/TanStack/table/blob/v7/examples/virtualized-rows/src/scrollbarWidth.js
https://mui.com/material-ui/react-table/