——table组件 收款定制开发修改滚动条样式——基础积累

收款定制开发前一段时间在写后台管理系统时，由于此系统对样式要求比较高，需要有UI出图。

antd官网上固定高度和宽度的如下：

我这边需要实现的效果如下：

由上图可以看出：竖向的滚动条不见了，的样式也改变了。

这个就是css的使用了：

<stype scoped lang="less">/deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header {  background: #fff !important;  box-sizing: border-box !important;}/deep/.ant-table-body {  &::-webkit-scrollbar {    height: 12px;    width: 0px;    overflow-y: auto;  }  &::-webkit-scrollbar-thumb {    border-radius: 5px;    background: #939392;  }  &::-webkit-scrollbar-track {    -webkit-box-shadow: 0;    border-radius: 0;    background: #f0f2f5;  }}/deep/.ant-table .ant-table-tbody > tr > td {  border: none;  border-bottom: 6px solid #efefef;}/deep/.ant-table-fixed .ant-table-thead > tr > th {  border-bottom: 1px solid #efefef;}/deep/.ant-table-fixed .ant-table-thead,/deep/.ant-table-fixed .ant-table-thead > tr {  height: 68px !important;}/deep/.ant-table table {  border-spacing: 0px !important;}</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1.表格头部滚动条部分要隐藏

/deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header {  background: #fff !important;  box-sizing: border-box !important;}
1
2
3
4

2.设置滚动条背景颜色及圆角等

/deep/.ant-table-body {  &::-webkit-scrollbar {    height: 12px;    width: 0px;    overflow-y: auto;  }  &::-webkit-scrollbar-thumb {    border-radius: 5px;    background: #939392;  }  &::-webkit-scrollbar-track {    -webkit-box-shadow: 0;    border-radius: 0;    background: #f0f2f5;  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.表格行与行之间的间距我是通过border-bottom来实现的

其实最好的办法就是：

/deep/.ant-table table {  border-spacing: 0px !important;}
1
2
3

4.固定操作一列时，发现表头部分错位

最后的实现方法就是：每一列宽度拉大，保证一行展示全title标题，然后给header设置固定高度。

/deep/.ant-table-fixed .ant-table-thead > tr > th {  border-bottom: 1px solid #efefef;}/deep/.ant-table-fixed .ant-table-thead,/deep/.ant-table-fixed .ant-table-thead > tr {  height: 68px !important;}
1
2
3
4
5
6
7

完成！！！多多积累，多多收获！！！