ant-design chrome86及以下版本,在scroll.x=max-content下,设置任意一列ellipsis=true时,会无法计算单元格长度,并且表格不展示横向滚动条

wj8zmpe1  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(126)
  • I have searched the issues of this repository and believe that this is not a duplicate.

https://github.com/Renderz/table-test

Steps to reproduce

pnpm install
pnpm start

What is expected?

表格能正确计算nowrap下单元格长度,并显示横向滚动条

What is actually happening?

表格并没有计算nowrap下单元格长度,没有显示横向滚动条
| Environment | Info |
| ------------ | ------------ |
| antd | 4.18.6 |
| React | 17.0.2 |
| System | macOS |
| Browser | chrome86.0.4240.75 |

  1. 目前看其他issue了解到不建议在max-content下使用ellipsis,本issue只是想确认查看特定场景下,浏览器显示不一致的问题。
  2. 测试了出现问题的浏览器版本,max-content和nowrap功能都是ok的。那么问题应该是出现在其他地方?
  3. 86-89chrome版本因为找不到安装包,没有测试,但是确认90版本是OK的
  4. 安装包下载地址
mzaanser

mzaanser1#

建议升级浏览器版本,目前的策略是不会对老版本 Chrome 的一些边界 bug 进行兼容。可能也没什么好办法。

2j4z5cfb

2j4z5cfb2#

建议升级浏览器版本,目前的策略是不会对老版本 Chrome 的一些边界 bug 进行兼容。可能也没什么好办法。

safari15.2也存在显示问题,火狐还没试过。

tjrkku2a

tjrkku2a3#

建议升级浏览器版本,目前的策略是不会对老版本 Chrome 的一些边界 bug 进行兼容。可能也没什么好办法。

似乎rc-table在 scroll.x = max-content ,无论是否存在 fixColumn ,都应该返回 table-layout: auto

(但是还没看出浏览器差异是怎么造成的

// Table layout
  const mergedTableLayout = React.useMemo<TableLayout>(() => {
    if (tableLayout) {
      return tableLayout;
    }
    // https://github.com/ant-design/ant-design/issues/25227
    // When scroll.x is max-content, no need to fix table layout
    // it's width should stretch out to fit content
   //. 应当吧max-content判断提前
    // if(scroll.x === 'max-content') { return 'auto'  }
    if (fixColumn) {
      return scroll.x === 'max-content' ? 'auto' : 'fixed';
    }
    if (fixHeader || isSticky || flattenColumns.some(({ ellipsis }) => ellipsis)) {
      return 'fixed';
    }
    return 'auto';
  }, [fixHeader, fixColumn, flattenColumns, tableLayout, isSticky]);
gpfsuwkq

gpfsuwkq4#

.ant-table-layout-fixed table {
table-layout:auto !important;
}

相关问题