fine-true/lib/table/index.less

A small and beautiful Vue3 version of the UI Library

/*
jiangbei 2022/05/31
*/

.fine-table {
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 !important;
  }

  .fine-table-border {
    border-left: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
  }
  .fine-table-container {
    display: flex;
    flex-direction: column;
  }
  .fine-table-header {
    overflow: hidden;
    flex-shrink: 0;
  }
  .fine-table-body {
    overflow: auto;
    flex: 1;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #f1f3f4;
      border-radius: 5px;
    }
  }
  .fine-table-thead {
    .fine-table-cell {
      background-color: #fafafa;
      transition: background 0.2s, border-color 0.2s;
      border-bottom: 1px solid #f0f0f0;
      padding: 16px;
      font-weight: 600;
    }
  }
  .fine-table-tbody {
    overflow: auto;
    .fine-table-row:hover {
      .fine-table-cell {
        background-color: #fafafa;
      }
    }
    .fine-table-cell {
      transition: background 0.2s, border-color 0.2s;
      border-bottom: 1px solid #f0f0f0;
      line-height: 22px;
      padding: 8px;
      background: #fff;
    }
  }
  .fine-table-cell-fixed,
  .fine-table-cell-fixed-right {
    position: sticky;
  }
  .fine-table-cell-fixed {
    left: 0;
  }
  .fine-table-cell-fixed-right {
    right: 0;
  }
}