@perfma/heaven/es/table/index.less

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

@import '~antd/es/table/style/index.less';
@import './column-setting/index.less';
@import '../style/vars.less';



.pro-table {
  .react-resizable {
    position: relative;
  }
  .react-resizable-handle {
    position: absolute;
    width: 10px;
    height: 100%;
    bottom: 0;
    right: -5px;
    cursor: col-resize;
  }

  &-resizable {
    .@{ant-prefix}-table-thead th::before {
      display: block;
    }
  }

  .@{ant-prefix}-table-cell-ellipsis .@{ant-prefix}-table-column-title {
    white-space: nowrap;
  }

  &-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    &-left {
      display: flex;
      justify-content: flex-start;
    }
    &-right {
      display: flex;
      justify-content: flex-end;
      margin-left: auto;
    }
  }

  &-left {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      top: 41px;
      width: 1px;
      background: #e0e5f0;
    }
    .@{ant-prefix}-table-tbody > tr > td {
      border-bottom-color: rgba(0, 0, 0, 0);
    }
  }
}

// Table
.@{ant-prefix}-table-expand-icon-col,
.@{ant-prefix}-table-section-col {
  width: 28px;
}
table tr th.@{ant-prefix}-table-row-expand-icon-cell,
table tr td.@{ant-prefix}-table-row-expand-icon-cell,
table tr th.@{ant-prefix}-table-selection-column,
table tr td.@{ant-prefix}-table-selection-column {
  color: #b6b6b6;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.@{ant-prefix}-table-placeholder .@{ant-prefix}-table-cell {
  border-bottom: none;
}
// ...等X个
.@{ant-prefix}-table-tbody > tr > td {
  background: #ffffff;
}
td.@{ant-prefix}-table-cell-ellipsis > div {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; //多行在这里修改数字即可
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

.@{ant-prefix}-table-thead th::before {
  display: none;
}

.@{ant-prefix}-table-cell.@{ant-prefix}-table-selection-column
  .@{ant-prefix}-table-selection,
.@{ant-prefix}-table-cell.@{ant-prefix}-table-selection-column
  .@{ant-prefix}-checkbox-wrapper {
  line-height: 14px;
  height: 14px;
  max-height: 14px;
}
.@{ant-prefix}-table-cell.@{ant-prefix}-table-selection-column {
  padding-top: 10.5px;
  padding-bottom: 10.5px;
}
// .@{ant-prefix}-table-thead
//   > tr
//   > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(.@{ant-prefix}-table-row-expand-icon-cell):not([colspan])::before {
//   width: 0;
// }
.@{ant-prefix}-table-cell-ellipsis > .@{ant-prefix}-table-column-sorters {
  display: flex;
}
.@{ant-prefix}-table-column-sorters {
  justify-content: flex-start;
  gap: 8px;
}
.@{ant-prefix}-table-column-title {
  flex: auto;
  flex-grow: 0;
}

.@{ant-prefix}-table-column-sorter,
.@{ant-prefix}-table-filter-trigger {
  height: 19px;
  color: #b6b6b6;
}

.@{ant-prefix}-table-filter-trigger {
  font-size: 14px;
  margin: 0;
  padding: 0;
  &:hover {
    background: inherit;
    color: #008AFF;
  }
}
.column-setting-cell-prev::before {
  width: 0 !important;
}
.column-setting-cell-prev .react-resizable-handle {
  cursor: unset;
}

.clickable-ellipsis-cell {
  cursor: pointer;
  &:hover {
    color: #008AFF;
  }
}

.@{ant-prefix}-table .@{ant-prefix}-table-title,
.@{ant-prefix}-table .@{ant-prefix}-table-footer,
.@{ant-prefix}-table .@{ant-prefix}-table-thead > tr > th,
.@{ant-prefix}-table tfoot > tr > th,
.@{ant-prefix}-table tfoot > tr > td {
  padding: 8px 16px;
  line-height: 19px;
}
.@{ant-prefix}-table.@{ant-prefix}-table .@{ant-prefix}-table-tbody > tr > td {
  padding: 12px 16px;
  line-height: 19px;
}

.@{ant-prefix}-table.@{ant-prefix}-table-middle .@{ant-prefix}-table-title,
.@{ant-prefix}-table.@{ant-prefix}-table-middle .@{ant-prefix}-table-footer,
.@{ant-prefix}-table.@{ant-prefix}-table-middle
  .@{ant-prefix}-table-thead
  > tr
  > th,
.@{ant-prefix}-table.@{ant-prefix}-table-middle tfoot > tr > th,
.@{ant-prefix}-table.@{ant-prefix}-table-middle tfoot > tr > td {
  padding: 4px 16px;
  line-height: 19px;
}
.@{ant-prefix}-table.@{ant-prefix}-table-middle
  .@{ant-prefix}-table-tbody
  > tr
  > td {
  padding: 8px 16px;
  line-height: 19px;
}

.@{ant-prefix}-table.@{ant-prefix}-table-small .@{ant-prefix}-table-title,
.@{ant-prefix}-table.@{ant-prefix}-table-small .@{ant-prefix}-table-footer,
.@{ant-prefix}-table.@{ant-prefix}-table-small
  .@{ant-prefix}-table-thead
  > tr
  > th,
.@{ant-prefix}-table.@{ant-prefix}-table-small tfoot > tr > th,
.@{ant-prefix}-table.@{ant-prefix}-table-small tfoot > tr > td {
  padding: 2px 16px;
  line-height: 19px;
}
.@{ant-prefix}-table.@{ant-prefix}-table-small
  .@{ant-prefix}-table-tbody
  > tr
  > td {
  padding: 4px 16px;
  line-height: 19px;
}

table tr th.@{ant-prefix}-table-selection-column,
table tr td.@{ant-prefix}-table-selection-column {
  text-align: left;
}

.@{ant-prefix}-table-pagination {
  margin-top: 24px !important;
}

.@{ant-prefix}-table-filter-dropdown-btns {
  padding: 7px 8px 7px 15px;
}
.@{ant-prefix}-table-filter-column{
  justify-content: flex-start;
  gap: 8px;
}

// 树形筛选样式
.@{ant-prefix}-table-filter-dropdown-tree{
  padding: 8px 0px;

 .@{ant-prefix}-table-filter-dropdown-checkall{
    padding: 7px 12px;
    margin: 0;
    &.@{ant-prefix}-checkbox-wrapper-checked {
      background: #f0f7ff;
      &:hover{
        background: #f5f5f5;
      }
    }
    &:hover{
      background: #f5f5f5;
    }
  }
  .@{ant-prefix}-tree .@{ant-prefix}-tree-treenode{
    padding: 5px 12px;
  }
  .@{ant-prefix}-tree .@{ant-prefix}-tree-treenode-checkbox-checked{
    background: #f0f7ff;
  }
  .@{ant-prefix}-tree .@{ant-prefix}-tree-treenode:not(.@{ant-prefix}-tree-treenode-selected):hover{
    background: #f5f5f5;
  }
  .@{ant-prefix}-tree-treenode .@{ant-prefix}-tree-node-content-wrapper:hover,
  .@{ant-prefix}-tree-treenode-checkbox-checked .@{ant-prefix}-tree-node-content-wrapper, 
  .@{ant-prefix}-tree-treenode-checkbox-checked .@{ant-prefix}-tree-node-content-wrapper:hover{
    background-color: transparent;
  }
  
  .@{ant-prefix}-tree-switcher{
    width: 0px;
  }
   .@{ant-prefix}-tree-checkbox{
    margin: 5px 4px 0 0;
  }
}


.@{ant-prefix}-dropdown-menu-title-content .@{ant-prefix}-checkbox + span{
  padding-left: 0;
  padding-right: 0;
}