@ttk/component/lib/table/style/index.less

ttk组件库

@import '../../assets/theme/index';

@hoverTdColor:@table-row-hover-bg;
#components-table-demo-drag-sorting tr.drop-over-downward td {
    border-bottom: 2px dashed #1890ff !important;
  }
  
  #components-table-demo-drag-sorting tr.drop-over-upward td {
    border-top: 2px dashed #1890ff !important;
  }
.emptyShowScroll{
    .@{ant-prefix}-table-body{
        z-index: 9;
        width: 100%;
        position: relative;
        background-color: transparent !important;
        overflow: auto;
    }
    .@{ant-prefix}-table-fixed-right,.@{ant-prefix}-table-fixed-left{
        z-index: 99;
    }
    .@{ant-prefix}-table-placeholder{
        .@{mk-prefix}-nodata{
            margin: 0 !important;
            padding: 0 !important;
        }
        padding: 0;
		position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        border: none !important
    }
}
.@{ant-prefix}-table{
	font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.@{mk-prefix}-table {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    border-left: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    border-top: 0;
	font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
    // ::selection {
    //     color:#333;
    // }

    .@{ant-prefix}-table-thead > tr > th:last-child{
        border-radius: 0;
    }
    .@{ant-prefix}-table-thead > tr > th:first-child{
        border-radius: 0;
    }
    table{

        // 凭证管理 强制设置表格的宽度根据设定宽度，不做自适应，如果影响到请这个下面的这个属性放到凭证管理的style.less
        table-layout:fixed;
        border-radius: 0px;
        th{
            position: relative;
            &>span:first-child{
              line-height: 36px;
            }
        }
        td>div{
          display: inline;
        }
        .react-resizable-handle{
            position: absolute;
            right: 0;
            top: 0;
            width: 10px;
            height: 100%;
            cursor: col-resize;
        }
        .table-center-item{
            text-align: center;
        }
    }
    .@{ant-prefix}-table{
        border-radius: 0;
    }
    .@{ant-prefix}-table::after{
        content: '';
        height: 100%;
        background: #d9d9d9;
        width: 1px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .@{ant-prefix}-table-bordered .@{ant-prefix}-table-fixed-right table{
        border-left-color: #d9d9d9;
        border-bottom-color:#d9d9d9;
    }

    .@{ant-prefix}-table .@{ant-prefix}-table-fixed tr{
        background: rgba(0,0,0,0);
        td{
            height: 37px !important;
            text-overflow: ellipsis;
            border-right: 1px solid #d9d9d9;
        }
        &:hover{
            // background: #fff !important;
            td{
                background: @item-hover-bg;
            }
        }
    }
    .@{ant-prefix}-table .@{mk-prefix}-active{
        background: #fff !important;
        td{
            background: @item-hover-bg !important;
        }
    }
    .@{ant-prefix}-table .@{ant-prefix}-table-fixed .@{mk-prefix}-active{
        background: #fff !important;
        td{
            background: @item-hover-bg !important;
        }
    }
    .@{ant-prefix}-table .@{ant-prefix}-table-fixed tr.@{mk-prefix}-active:hover{
        td{
            background: @item-hover-bg2 !important;
        }
    }
    .@{ant-prefix}-table-fixed-right .@{ant-prefix}-table-tbody tr:hover{
        // background: #fff !important;
        &>td{
            background: @item-hover-bg;
        }
    }
    .@{ant-prefix}-table-fixed-right .@{ant-prefix}-table-tbody .@{mk-prefix}-active{
        // background: @antSelect-selected-color !important;
        td{
            background: @item-hover-bg !important;
        }
    }
    .@{ant-prefix}-table-tbody{
        tr:nth-child(odd) {
            background: rgba(255,255,255,1);
        }
        tr:nth-child(even) {
            td {
                background: #f8f8f8;
            }
            // background: #f8f8f8;
        }
        tr:hover {
            // background: #fff !important;
            td {
                background:@item-hover-bg;
            }
        }
    }

    .@{ant-prefix}-table-scroll  .@{ant-prefix}-table-header {
        .@{ant-prefix}-table-fixed {
            border-left: none;
        }
    }

    .@{ant-prefix}-table-header{
        //edge
        // -ms-scroll-chaining: chained;
        // -ms-overflow-style: none;
        // -ms-content-zooming: zoom;
        // -ms-scroll-rails: none;
        // -ms-content-zoom-limit-min: 100%;
        // -ms-content-zoom-limit-max: 500%;
        // -ms-scroll-snap-type: proximity;
        // -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
        // -ms-overflow-style: -ms-autohiding-scrollbar;


        //IE11 滚动条对应的颜色
        scrollbar-base-color: #eaeaea;
        scrollbar-base-color: #eaeaea;
        scrollbar-3dlight-color: #eaeaea;
        scrollbar-highlight-color: #eaeaea;
        scrollbar-track-color: #eaeaea;
        scrollbar-arrow-color: #eaeaea;
        scrollbar-shadow-color: #eaeaea;
        .@{ant-prefix}-table-fixed {
            border-top: 1px solid #d9d9d9;
            .@{ant-prefix}-table-thead {
                border-left: 1px solid #d9d9d9;
            }
        }

    }
    .@{ant-prefix}-table-body {
        &>table {
            border-top: 1px solid #d9d9d9;
            border-left: 0px;
            border-right: 0px;
            border-bottom: 0px;
        }
    }
    

    .@{ant-prefix}-table-header {
        &::-webkit-scrollbar/*整体部分*/
        {
            width: 10px;
            height: 6px;
            background: #eaeaea;
            // margin-left: 5px;
            // padding: 0px 2px;
            // margin: 0px 2px;
        }
    }
    
    .@{ant-prefix}-table-fixed-header .@{ant-prefix}-table-fixed-right, .@{ant-prefix}-table-fixed-right table{
        border-radius: 0;
        .@{ant-prefix}-table-body-outer {
            margin-bottom: -10px !important;
        }
    }
    .@{ant-prefix}-table-fixed-header .@{ant-prefix}-table-fixed-left, .@{ant-prefix}-table-fixed-left table{
        border-radius: 0;
        .@{ant-prefix}-table-body-outer {
            margin-bottom: -10px !important;
        }
    }

    .@{ant-prefix}-table-body, .@{ant-prefix}-table-fixed-right .@{ant-prefix}-table-body-inner,.@{ant-prefix}-table-fixed-left .@{ant-prefix}-table-body-inner{
        
        -webkit-overflow-scrolling: auto;
        &::-webkit-scrollbar/*整体部分*/
        {
            width: 10px;
            height:10px;
            // background-color: #eaeaea;
            // margin-left: 5px;
            // padding: 0px 2px;
            // margin: 0px 2px;
        }

        &::-webkit-scrollbar-track/*滑动轨道*/
        {
            -webkit-box-shadow: none;
            border-radius: 0;
            background: #eaeaea;
            // margin-left: 5px;
            padding: 0px 5px;
            width: 10px;
            border-left: none;
            border-right: none;
            // border-left: 1px solid #d9d9d9;
            // border-right: 1px solid #d9d9d9;
        }
       
        &::-webkit-scrollbar-thumb/*滑块*/
        {
            border-radius: 10px;
            background-color: #eaeaea;
            padding-top: 4px;
            width: 10px;
            -webkit-box-shadow: none;
            background: #c2c2c2;
            border-left: none;
            border-right: none;
            // border-left: 1px solid #d9d9d9;
            // border-right: 1px solid #d9d9d9;
        }

        &::-webkit-scrollbar-thumb:hover/*滑块效果*/
        {
            border-radius: 10px;
            -webkit-box-shadow: none;
            // border-left: 1px solid #d9d9d9;
            border-left: none;
            border-right: none;
            // border-right: 1px solid #d9d9d9;
            background: rgba(114,114,114,0.8);
        }
    }
    .@{ant-prefix}-table-thead > tr {
        // height: 36px !important;
        th {
            background-color: #eaeaea;
            color: #333333;
            font-size: 13px;
            font-weight: bold;
            text-align: center;
            padding: 0 4px;
            white-space:nowrap;
            overflow:hidden;
            border-color: #d9d9d9 !important;
            text-overflow:ellipsis;
            height: 100%;
            // border-top: 1px solid #d9d9d9;
            &>span:first-child{
                // line-height: 35px;
            }
        }
    }

    .@{ant-prefix}-table-tbody{
        // background: #cacaca;
        background: #fff;
        .table_center{
            text-align: center;
        }

        tr:not(.lazy_table_tr){
            height: 37px ;
            box-sizing: border-box;
            td {
                height: 37px !important;
                font-size: 10px;
                padding: 0 4px;
                border-top: 0;
                border-bottom: 1px solid #d9d9d9;
                border-left: 0;
                border-color: #d9d9d9;
                box-sizing: border-box;
                color: #333333;
                font-size: 13px;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
        }
        tr:last-child{
        	td{
        		border-bottom: 1px solid #d9d9d9;
        	}
        }
        .lazy_table_last { //lazy_table 合并行滚动错位
            td {
                display: none;
            }
        }
    }
    .@{mk-prefix}-table-checkbox{
        text-align: center;
        vertical-align: middle;
        width: 34px !important;
    }
    //暂无数据显示的下边框
    // .@{ant-prefix}-table-placeholder{
    // }
    .@{ant-prefix}-table-bordered.@{ant-prefix}-table-empty .@{ant-prefix}-table-body::after{
        border-right: 1px solid #d9d9d9;
        content: '';
    }
    .@{ant-prefix}-table-bordered.@{ant-prefix}-table-empty .@{ant-prefix}-table-placeholder{
        position: absolute;
        top: calc(50% + 45px);
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        border: none;
        padding: 0;
        background: none;
    }
}
.@{mk-prefix}-table.@{mk-prefix}-table-loading{
    position: relative;
    .@{ant-prefix}-spin-nested-loading{
        position: relative;
        width: 100%;
        height: 100%;
        // flex: 1;
        // position: initial;
    }
    .@{ant-prefix}-spin-nested-loading > div > .@{ant-prefix}-spin{
        max-height: 100%;
        // left: 0;
        // top: 0;
    }
}
.@{ant-prefix}-table-fixed-header .@{ant-prefix}-table-body table {
    border-top: none;
}
.@{ant-prefix}-table{
    .@{ant-prefix}-table-fixed-right{
        box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15) !important;
        .@{ant-prefix}-table-fixed{
            .@{ant-prefix}-table-thead{
                .table_fixed_width.react-resizable{
                    height: auto !important;
                }
            }
        }
    }
    .@{ant-prefix}-table-fixed-left{
        // box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.15) !important
        // JCDA2019-7038 firefox 浏览器样式错乱
        .@{ant-prefix}-table-header {
            width: -moz-min-content;
        }
        .@{ant-prefix}-table-body-outer .@{ant-prefix}-table-fixed {
            width: -moz-min-content;
        }
    }
}