css
复制代码
<style lang="less">
.check-task-management-box .table-wrap {
.ant-table,
.ant-table-container,
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td,
.ant-table-cell {
border-color: #b6c3cf !important;
}
.ant-table-thead > tr > th::before {
background-color: #b6c3cf !important;
}
.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
border-color: #b6c3cf !important;
}
.ant-table-wrapper .ant-table-thead > tr > th {
height: 40px;
padding: 8px;
color: #1f1f1f;
font-size: 14px;
font-weight: 600;
background-color: rgba(239, 246, 255, 1);
}
.ant-table-wrapper .ant-table-tbody > tr > td {
height: 42px;
padding: 8px;
color: #1f1f1f;
font-size: 13px;
border-bottom: 1px solid #efefef;
}
.ant-table-tbody > tr:hover > td {
background: #fafcff;
}
.ant-pagination {
margin: 10px 12px;
font-size: 14px;
}
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
min-width: 24px;
height: 24px;
line-height: 22px;
}
/* 表体用 scrollbar-gutter 稳定占位,避免表头/内容宽度不一致 */
.ant-table-body {
overflow-y: auto !important;
overflow-x: auto !important;
scrollbar-gutter: stable;
border-right: 1px solid #b6c3cf;
box-shadow: inset 0 -1px 0 0 #b6c3cf;
/* 滚动条整体 */
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #fff;
border-left: 1px solid #b6c3cf;
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #b6c3cf;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: #96aab8;
}
/* 横纵滚动条交叉角 */
&::-webkit-scrollbar-corner {
background: #fff;
border-top: 1px solid #b6c3cf;
border-left: 1px solid #b6c3cf;
}
}
/* 表头隐藏自身滚动条,由 scrollbar-gutter 保证宽度一致 */
.ant-table-header {
overflow: hidden !important;
margin-bottom: 0 !important;
}
/* 左侧冻结末列(计划名称)添加右侧阴影 */
.ant-table-cell-fix-left-last {
box-shadow: 1px 0 0 0 #b6c3cf !important;
}
/* 右侧冻结首列:左边框 #EFF6FF + 阴影 #B6C3CF */
.ant-table-cell-fix-right-first {
border-inline-start: 1px solid #eff6ff !important;
box-shadow: -2px 0 0 0 #b6c3cf !important;
}
/* 修复表头最右列右边框 */
.ant-table-wrapper .ant-table-container table > thead > tr:first-child > *:last-child {
// border-inline-end: 1px solid #b6c3cf !important;
border-inline-end: none !important;
}
}
</style>