antd-mobile/es/table/style/index.less

基于 React 的移动设计规范实现

@import '../../style/themes/default';
@import '../../style/mixins';

@table-prefix-cls: am-table;
@table-head-background-color: @color-text-base;

.@{table-prefix-cls} {
  font-size: @font-size-caption;
  color: @color-text-base;
  position: relative;

  &-body {
    transition: opacity .3s ease;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    overflow: hidden;
    background-color: #fff;
    font-size: 28px;
    color: #000;
  }

  th {
    background-color: #f7f7f7;
    color: #888;
    font-weight: bold;
    transition: background .3s ease;
    text-align: left;
    line-height: @line-height-paragraph;
    font-size: 24px;
  }

  td {
    border-bottom: @border-width-sm solid #d9d9d9;
  }

  th,
  td {
    padding: 20px 16px;
    word-break: break-all;
  }

  &-horizonTitle {
    background-color: #f7f7f7;
    color: #888;
    font-weight: bold;
    transition: background .3s ease;
    text-align: center;
    line-height: @line-height-paragraph;
    font-size: 24px;
  }

  &-fixed-left {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
    box-shadow: 1px 0 1px @color-shadow;
    transition: box-shadow .3s ease;
    border-radius: 0;

    table {
      background-color: #f7f7f7;
      color: #888;
      font-weight: bold;
      transition: background .3s ease;
      text-align: center;
      font-size: 24px;
    }
  }

  &-vertical-scroll {
    position: absolute;
    top: 0;
  }

  &-scroll-position-left {
    .@{table-prefix-cls}-fixed-left {
      box-shadow: none;
    }
  }

  &-scroll-position-middle {
    overflow: auto;
    position: relative;
    box-shadow: 1px 0 1px @color-shadow;
  }
}