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>
相关推荐
小码哥_常4 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮7 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀8 小时前
Vue插槽
前端·javascript·vue.js
qq_448011168 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan9 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352909 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝10 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing0311 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel11 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放11 小时前
Python基础语法练习题(73)
java·前端·python