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>
相关推荐
程序员爱钓鱼6 分钟前
Rust if let 与 while let 详解:简化模式匹配
前端·后端·rust
胡萝卜术19 分钟前
从暴力到滑动窗口的终极形态:力扣3「无重复字符的最长子串」的优化进化之路
前端·javascript·面试
钛态9 小时前
前端安全防线:CSRF 攻击链路与双重 Token 校验的工程实现
前端·vue·react·web
张拭心10 小时前
技术管理笔记:让我“燃尽”的一天
前端
不好听61311 小时前
BFF 架构实战:从前端直调 API 到加入中间层
前端·架构
不好听61311 小时前
前端跨域完全指南:从为什么报错到三种解决方案
前端
三84411 小时前
路由策略/控制 配置双点双向路由重发布
服务器·前端·javascript
Qimooidea12 小时前
祁木 CAD Translator 工程图纸出海实战指南
服务器·前端·安全
小林ixn12 小时前
从BFF到SSE:我在Vue项目里藏了个“AI翻译官”
前端·vue.js·vite
元气少女小圆丶13 小时前
unity发布web嵌入到前端页面的接受参数
前端·unity·webgl