2 用2個(gè)<table>

2.1 描述

使用兩個(gè)table分別放置實(shí)際的header和body

2.2 滾動

2.2.1 一些問題

• <thead>和<tbody>無法設(shè)置高度，就無法用overflow:scroll 來讓它滾動；
• <table>的整體設(shè)置高度會讓表頭和表內(nèi)容一起滾動，沒有辦法固定住表頭只滾動內(nèi)容。

2.2.2 實(shí)現(xiàn)

為了讓表頭和表內(nèi)容都可以滾動，需要用兩個(gè)<table>分別包裹表頭和表內(nèi)容，如下

兩個(gè)table

樣式示例

分別可以滾動

一起滾動

• 目標(biāo)：讓表頭和表內(nèi)容一起滾
• 實(shí)現(xiàn)：使用onScroll事件，讓表頭和表內(nèi)容的scrollLeft在滾動的時(shí)候保持一致
  
  代碼
  
  
  效果

2.3 對齊

2.3.1 寬度調(diào)整

• 問題：現(xiàn)在雖然能同步滾動了，但是每列沒有對上，需要處理寬度
• 實(shí)現(xiàn)：使用table-layout: fixed;，手動設(shè)置每列寬度

但是
這個(gè)table有兩層的頭，第二層頭的<th>設(shè)置width是失效的，也就是說沒辦法直接修改th、td樣式來讓寬度保持一致。

• 解決：使用<colgroup>來設(shè)定列的寬度，可以根據(jù)自己的column來動態(tài)設(shè)置
  例如

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 總寬度調(diào)整

• 問題：但是body所在的table因?yàn)槎嗔艘粋€(gè)滾動條寬度，所以兩個(gè)table的寬度不一樣，滾動條橫向拖到尾部會出現(xiàn)不對齊的情況，如下
  
  示例
• 解決：給header加上這個(gè)多出來的滾動條寬度，寬度計(jì)算的代碼如下：

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 文檔

• 問題：上面那種辦法必須指定每列的寬度，不然滾動的時(shí)候就對不齊了，table每列自適應(yīng)還是很方便的。

在不考慮IE的情況下其實(shí)有更簡單的辦法：對<thead>設(shè)置position:sticky

dom

• 值得注意的是，在Firefox里如果給標(biāo)簽<thead>設(shè)置sticky，且使用了border-collapse: collapse,border會看不見，需要改成

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

完成效果如下

效果

下一篇：
多個(gè)固定列的React Table組件

Reference:
http://m.itdecent.cn/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/