a-table 冻结列导致边框

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>
相关推荐
Hello--_--World1 小时前
React:状态管理 官网笔记
前端·笔记·react.js
kuuailetianzi1 小时前
Vue 3图片全屏预览组件:打造专业级图像浏览体验
前端·javascript·microsoft
前端杂货铺2 小时前
manifold-3d——在 Vue 项目中实现干涉检查
前端·vue.js·manifold
恋猫de小郭2 小时前
Bun 官方将正式支持 Android,Claude Code 未来可以直接在手机上跑
android·前端·ai编程
晓得迷路了2 小时前
栗子前端技术周刊第 126 期 - Rspack 2.0、TypeScript 7.0 Beta、Git 2.54...
前端·javascript·ai编程
小小码农Come on2 小时前
单例 QtObject 全局配置
开发语言·前端·javascript
摸鱼仙人~2 小时前
HTTP状态码全量详解(定义+核心区别+业务场景+前端常见诱因+排查方案+工程处理)
前端·网络协议·http
Go 言 Go 语2 小时前
Claude Code 核心加载机制详解
服务器·前端·数据库
朝阳392 小时前
CSS【详解】给子元素添加间距的最佳实践(含space 和 gap 的区别图解和面试的标准答案)
前端·css