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

wj8zmpe1  于 7个月前  发布在  其他
关注(0)|答案(4)|浏览(241)
  • 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

  1. pnpm install
  2. 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

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

  1. // Table layout
  2. const mergedTableLayout = React.useMemo<TableLayout>(() => {
  3. if (tableLayout) {
  4. return tableLayout;
  5. }
  6. // https://github.com/ant-design/ant-design/issues/25227
  7. // When scroll.x is max-content, no need to fix table layout
  8. // it's width should stretch out to fit content
  9. //. 应当吧max-content判断提前
  10. // if(scroll.x === 'max-content') { return 'auto' }
  11. if (fixColumn) {
  12. return scroll.x === 'max-content' ? 'auto' : 'fixed';
  13. }
  14. if (fixHeader || isSticky || flattenColumns.some(({ ellipsis }) => ellipsis)) {
  15. return 'fixed';
  16. }
  17. return 'auto';
  18. }, [fixHeader, fixColumn, flattenColumns, tableLayout, isSticky]);
展开查看全部
gpfsuwkq

gpfsuwkq4#

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

相关问题