windows版本chrome中table固定表头scroll样式问题

[Catlite91]

windows版本chrome中table固定表头scroll样式问题

官网链接：
https://ant.design/components/table-cn/#components-table-demo-fixed-header

[afc163]

1. 这个 scrollbar 是有用的，避免某些情况下列头和列不对齐的情况。
2. 这个 scrollbar 确实不好看，我用一些样式把它隐藏掉。

[hirohe]

设置了margin-right: -18px来隐藏scrollbar的话，Table组件如果是bordered就看得出来表头与内容不对齐
而且最后一列的表头右边框没有显示出来
columns.width设置为百分比的更明显

codepen

按照这里的方法设置 padding-right倒是没有问题
codepen

[afc163]

感谢反馈~ 😅

[afc163]

换了三种方法搞这个问题...

[nekronhuang]

终于在这里找到了答案。。。

npm安装的2.7.1版本是使用的 fb421f1 方案，但是仓库里npm run dist出来的css里没有**scroll:after的样式

查了好久。。。原来是被回滚了

[afc163]

第四种方案。opacity: 0.001 而不是隐藏，隐藏会影响列对齐。

---

这个会导致 #4936 的问题。

[afc163]

不再尝试修复这个问题，上面的四种解决方案都会导致其他问题。

---

1. overflow-x: hidden + margin-right 的方案，导致了 https://github.com/ant-design/ant-design/issues/4637#issuecomment-274303478。
2. overflow-x: hidden + padding-right 的方案，导致了 antd组件table示例问题 #4750 table列头与列错位 #4753。
3. 伪元素盖住滚动条 的方案，导致了 Middle/small table with fixed header style issue #4850。
4. opacity: 0.001 隐藏滚动条 的方案，导致了 Extra pads on table fixed header #4936。

---

2019-06-04 更新：

经过艰辛的探索，终于找到了解决方案：

• fix(Table): Hide header extra scrollbar react-component/table#333
• fix(Table): Hide header extra scrollbar control #16950

[uinz]

antd 2.7.2 版本

windows 下 ant-table-header 会有 margin-bttom: -17px; 的样式

mac 下正常

---

windows 下样式问题:

[afc163]

@uinz 2.7.2 should have style like below:

Where is .ant-table-scroll?

Could you provide a re-producible demo to help us, by forking and editing this codepen: http://codepen.io/benjycui/pen/KgPZrE?editors=001

[uinz]

@afc163

I use jsx style API

const { Column} = Table;

<Table
    rowKey='id'
    pagination={false}
    dataSource={this.props.upstreams}
    scroll={{y: 'calc(100vh - 55px)'}}
>
    <Column
        title='账号'
        dataIndex='account'
        key='account'
    />
</Table>

DOM tree:

on windows
.ant-table-header element has been set inline style
margin-bottom and padding-bottom

http://codepen.io/yinz/pen/vxBEem?editors=1010

[uinz]

@afc163
在 codepen 里

两个表现也不一致,

window

mac

[afc163]

楼上的问题在 8698111 里修复了。

[uinz]

@afc163 所以windos 下的 -margin 是用来遮盖 scroll bar 的?

mac 下也可以强制显示 scrollbar 所以我觉得 不应该判断平台来增加 inlinestyle 这么做.

[lileilei]

可以参考 jquery mini 的 table做法，当数据不超过的时候是不需要显示滚动条的，当数据超过高度表头和内容框都需要显示滚动条。最好能让设置table高度，就撑满屏幕了table

[daryl-z]

html {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
::-webkit-scrollbar {
display: none;
}

[vii120]

It works for me:

.ant-table-scroll .ant-table-header::-webkit-scrollbar {
    opacity: 0.001;
}

It doesn't change the layout, just adjust the opacity of scrollbar in header

[yoyo837]

@Angelki overflow: -moz-scrollbars-none; not work.

[yoyo837]

@vii120 Your code is limited to WebKit.

[afc163]

经过艰辛的探索，终于找到了解决方案，同时满足 chrome 和 firefox，mac 开启和不开启滚动条的各种情况：

• fix(Table): Hide header extra scrollbar react-component/table#333
• fix(Table): Hide header extra scrollbar control #16950