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>
相关推荐
漂流瓶jz3 小时前
总结CSS组件化演进之路:命名规范/CSS Modules/CSS in JS/原子化CSS
前端·javascript·css
踩着两条虫3 小时前
「AI + 低代码」的可视化设计器
开发语言·前端·低代码·设计模式·架构
Jagger_4 小时前
项目上线忙碌结束之后,为什么总想找点事做?
前端
GalenZhang8884 小时前
OpenClaw 配置多个飞书账号实战指南
前端·chrome·飞书·openclaw
萌新小码农‍5 小时前
python装饰器
开发语言·前端·python
threelab6 小时前
Three.js 初中数学函数可视化 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
爱学习的程序媛6 小时前
浏览器工作原理全景解析
前端·浏览器·web
我是若尘7 小时前
用 Git Worktree 同时开多个需求,不用来回 stash
前端
IT_陈寒7 小时前
Vue的v-for为什么不加key也能工作?我差点翻车
前端·人工智能·后端
小碗羊肉7 小时前
【JavaWeb | 第十二篇】项目实战——登录功能
java·前端·数据库