chenhaodong / mew-iview

  @table-prefix-cls: ~"@{css-prefix}table";
  
  .@{table-prefix-cls} {

      width: 100%;

      max-width: 100%;

      overflow: hidden;

      color: @text-color;
      font-size: @font-size-small;

      background-color: #fff;
      border: 1px solid @border-color-base;
      border-bottom: 0;

      border-right: 0;

      border-collapse: collapse;
      box-sizing: border-box;
      position: relative;

      &:before{
          content: '';
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0;
          bottom: 0;
          background-color: @border-color-base;
          z-index: 1;
      }
  
      &:after{
          content: '';
          width: 1px;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          background-color: @border-color-base;
          z-index: 1;
      }
  

      &-with-header{
          border-radius: @border-radius-base @border-radius-base 0 0;
      }
  
      &-with-footer{
          border: 1px solid @border-color-base;
          border-radius: 0 0 @border-radius-base @border-radius-base;
      }
  
      &-with-header&-with-footer{
          border-radius: @border-radius-base;
      }
  
      &-title, &-footer{
          height: 48px;
          line-height: 48px;
          border-bottom: 1px solid @border-color-split;
      }
      &-footer{
          border-bottom: none;
      }
  

      &-header{
          overflow: hidden;
      }

      &-body{

          overflow: auto;

          position: relative;
      }
  

      &-with-fixed-top&-with-footer{
          .@{table-prefix-cls}-footer{
              border-top: 1px solid @border-color-base;
          }
          tbody tr:last-child td{
              border-bottom: none;
          }
      }
  

      th, td
      {
          min-width: 0;
          height: 48px;
          box-sizing: border-box;
          text-align: left;
          text-overflow: ellipsis;
          vertical-align: middle;
          position: relative;
          border-bottom: 1px solid @border-color-split;

      }
  

      th {
          height: 40px;

          white-space: nowrap;
          overflow: hidden;

          background-color: @table-thead-bg;
      }
      td{
          background-color: #fff;
          transition: background-color @transition-time @ease-in-out;

      }
  

      th&-column,
      td&-column

      {

          &-left{
              text-align: left;
          }
          &-center{
              text-align: center;
          }
          &-right{
              text-align: right;
          }
      }
  
      & table{

          //width: 100%;
          table-layout: fixed;

      }
      &-border{
          th,td{
              border-right: 1px solid @border-color-split;
          }
      }
      &-cell{
          padding-left: 18px;
          padding-right: 18px;
          overflow: hidden;

          text-overflow: ellipsis;

          white-space: normal;
          word-break: break-all;
          box-sizing: border-box;
      }
      th &-cell{
          display: inline-block;

          position: relative;

          word-wrap: normal;
          vertical-align: middle;
      }
  
      &-stripe &-body{
          tr:nth-child(2n) {
              td{
                  background-color: @table-td-stripe-bg;
              }
          }
      }
  

      tr&-row-hover{

          td{
              background-color: @table-td-hover-bg;
          }
      }
  
      &-large {
          font-size: @font-size-base;
          th{
              height: 48px;
          }
          td{
              height: 60px;
          }

          &-title, &-footer{
              height: 60px;
              line-height: 60px;
          }

      }
  
      &-small{
          th{
              height: 32px;
          }
          td{
              height: 40px;
          }

          &-title, &-footer{
              height: 40px;
              line-height: 40px;
          }

      }
  
      &-row-highlight,

      tr&-row-highlight&-row-hover,

      &-stripe &-body tr&-row-highlight:nth-child(2n)
      {
          td{
              background-color: @table-td-highlight-bg;
          }

      }
  }