首先给antd 下div加个width 100% 避免内容超出容器。
然后 固定表头列 scrollX可以写 'max-content'自动撑开， 也可以自己算具体数值。
:global {
.ant-table {
.ant-table-body-inner {
overflow-y: hidden;
}
//设置表格头部竖向滚动宽度
.ant-table-header::-webkit-scrollbar {
10px;
}
//设置表格体滚动宽度
.ant-table-body,
.ant-table-body-inner {
&::-webkit-scrollbar {
10px;
height: 10px;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #909090;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #ededed;
}
}
.ant-table-scroll {
padding-right: 0px;
}
// .ant-table-fixed{
// &::-webkit-scrollbar {
// 10px;
// height: 10px;
// }
// &::-webkit-scrollbar-thumb {
// height: 10px;
// border-radius: 4px;
// // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
// background: #909090;
// }
// &::-webkit-scrollbar-track {
// height: 10px;
// // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
// border-radius: 4px;
// // background: #ededed;
// }
// }
// 解决固定列底部预留的空隙
.ant-table-fixed-left,
.ant-table-fixed-right {
.ant-table-body-outer {
margin-bottom: -9px !important;
// margin-bottom: -12px !important;
}
}
}
.tdNoShadow {
position: relative;
z-index: 99;
background: #fff;
}
.columnName:not(th) [class*="hoverCompany"] {
z-index: 99;
// transform: translate3d(0,0,10px);
background-color: #fff;
transition-delay: 0ms;
transition-duration: 0ms;
position: relative;
}
[class*="hoverCompany"] {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
background-color: #fff;
// padding: 0 10px;
}
.ant-table .ant-table-tbody > tr {
transition-delay: 0ms;
transition-duration: 0ms;
background-color: rgba(206, 235, 224, 0.5);
& > td {
max- 100%;
word-break: break-all;
// word-break: break-word;
}
&:nth-of-type(even),
&:nth-of-type(odd) {
background-color: #fff !important;
}
// .ant-table .ant-table-tbody > tr:hover td {
// &.columnName [class*="hoverCompany"] {
// transparent;
// }
}
.ant-table-fixed .ant-table-tbody {
// 冻结列hover样式同步
.ant-table-row-hover {
background-color: rgba(206, 235, 224, 0.5) !important;
}
}
.ant-table-fixed-left .ant-table-body-outer .ant-table-body-inner {
margin-top: 0px;
}
.ant-table-header .ant-table-fixed{
background-color: #199475;
}
.ant-table-body .ant-table-fixed{
background-color: #fff;
}
}