antd3.x 的Table组件,设置横向滚动,如果没有数据,横向滚动条会展示在暂无数据的上方,现在想要把暂无数据展示在滚动条的上面
原本
效果
解决方法
- 将antd3.x升级到antd4.x,因为antd4的table组件已经解决了这个bug
- antd3.x 和 antd4.x 共存,调用antd4的table组件
- 修改样式,实现滚动条在暂无数据下方
这里主要讲第三点
思路:表单无数据的时候,把 ant-table-tbody(表单内容) 撑高,然后通过绝对定位把 ant-table-placeholder (暂无数据的div)脱离文档流,移动上去
上代码
.scrollH .ant-table-tbody{ height: 168px; } .scrollH .ant-table-placeholder{ position: absolute; width: 100%; top: 51px; z-index: 5; }
复制
大功告成👍👍👍