antd-table滚动条

注:两者的区别:
table超长,后面不显示了,那么:

.ant-table-body {
  overflow: auto;
} // “没有数据”没有滚动条,只是表格滚动
.ant-table-content{}   // 给这个类加overflow:auto;这样在表格没有数据的时候,“没有数据”也是要随着滚动的!!!
### 自定义 Ant Design Vue 表格组件中的滚动条样式 在实际项目开发过程中,为了提升用户体验和界面美观度,常常需要对默认的滚动条样式进行自定义。对于 Ant Design Vue 的 `Table` 组件而言,可以通过 CSS 或者 SCSS 来实现这一目标。 #### 使用深嵌套选择器覆盖默认样式 由于 Ant Design Vue 是基于 BEM 命名法构建的框架,默认情况下其内部样式具有较高的优先级。因此,在修改如滚动条这样的细粒度样式时,通常需要用到 `/deep/` 深层作用符来穿透样式隔离边界[^3]: ```scss /deep/ .ant-table-scroll { overflow-x: auto; &::-webkit-scrollbar { /* 定义整体宽度 */ width: 8px; /* 高宽分别对应横竖滚动条的尺寸 */ &:horizontal { /* 如果想要单独调整水平方向上的滚动条大小 */ height: 8px; } } &::-webkit-scrollbar-thumb { /* 修改滑动块的颜色以及圆角 */ border-radius: 4px; background-color: rgba(0, 0, 0, 0.2); transition: all 0.3s ease; &:hover { /* 当鼠标悬停于滑动块之上时的效果 */ background-color: rgba(0, 0, 0, 0.5); } } &::-webkit-scrollbar-track { /* 设置轨道颜色 */ border-radius: 4px; background-color: transparent; } } ``` 上述代码片段展示了如何通过 WebKit 浏览器特有的伪类 `-webkit-scrollbar-*` 对象来自定义滚动条的不同部分(比如滑轨、滑块),并为其添加交互效果,像当用户将光标移到滚动条上方时改变背景色等操作[^4]。 此外,如果遇到表头与内容区域之间存在错位的情况,则可以尝试调整 `.ant-table-thead th`, `.ant-table-tbody td` 下的相关属性以确保两者能够完美对接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值