antd表格內容超出區域 表格有橫豎滾動條 凍結表格列錯位問題 滾動條mac和windows 兼容問題


首先給antd 下div加個width  100%   避免內容超出容器。
然后 固定表頭列  scrollX可以寫 'max-content'自動撐開, 也可以自己算具體數值。

 

:global {
    .ant-table {
      .ant-table-body-inner {
        overflow-y: hidden;
      }
      //設置表格頭部豎向滾動寬度
      .ant-table-header::-webkit-scrollbar {
        width: 10px;
      }

      //設置表格體滾動寬度
      .ant-table-body,
      .ant-table-body-inner {
        &::-webkit-scrollbar {
          width: 10px;
          height: 10px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 4px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #909090;
        }
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 4px;
          background: #ededed;
        }
      }

      .ant-table-scroll {
        padding-right: 0px;
      }
      // .ant-table-fixed{
      //   &::-webkit-scrollbar {
      //     width: 10px;
      //     height: 10px;
      //   }
      //   &::-webkit-scrollbar-thumb {
      //     height: 10px;
      //     border-radius: 4px;
      //     // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      //     background: #909090;
      //   }
      //   &::-webkit-scrollbar-track {
      //     height: 10px;
      //     // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      //     border-radius: 4px;
      //     // background: #ededed;
      //   }
      // }

      // 解決固定列底部預留的空隙
      .ant-table-fixed-left,
      .ant-table-fixed-right {
        .ant-table-body-outer {
          margin-bottom: -9px !important;
          // margin-bottom: -12px !important;
        }
      }
    }

    .tdNoShadow {
      position: relative;
      z-index: 99;
      background: #fff;
    }
    .columnName:not(th) [class*="hoverCompany"] {
      z-index: 99;
      // transform: translate3d(0,0,10px);
      background-color: #fff;
      transition-delay: 0ms;
      transition-duration: 0ms;
      position: relative;
    }
    [class*="hoverCompany"] {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      // padding: 0 10px;
    }
    .ant-table .ant-table-tbody > tr {
      transition-delay: 0ms;
      transition-duration: 0ms;
      background-color: rgba(206, 235, 224, 0.5);
      & > td {
        max-width: 100%;
        word-break: break-all;
        // word-break: break-word;
      }

      &:nth-of-type(even),
      &:nth-of-type(odd) {
        background-color: #fff !important;
      }
      // .ant-table .ant-table-tbody > tr:hover td {
      //   &.columnName [class*="hoverCompany"] {
      //     transparent;
      //   }
    }
    .ant-table-fixed .ant-table-tbody {
      // 凍結列hover樣式同步
      .ant-table-row-hover {
        background-color: rgba(206, 235, 224, 0.5) !important;
      }
    }
    .ant-table-fixed-left .ant-table-body-outer .ant-table-body-inner {
      margin-top: 0px;
    }
    .ant-table-header .ant-table-fixed{
      background-color: #199475;
    }
    .ant-table-body .ant-table-fixed{
      background-color: #fff;
    }
  }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM