html表格打横超出范围,antd表格内容超出区域 表格有横竖滚动条 冻结表格列错位问题 滚动条mac和windows 兼容问题...

: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;

}

}