taro-table/index.less

tarojs table component

/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
/*取消chrome的字体大小自适应的功能*/
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}


.taro-table{
    margin:0 0.5rem;
    font-size: 0.8rem;
}
.taro-table-head{
    margin: 0.6rem 0;
    border-bottom:1px solid deepskyblue;
}
.taro-table-body{
    font-size: 0.6rem;
}
.taro-table-head view, .taro-table-tr view{
    width:3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align:center;
    line-height:1.2rem;
}
.taro-table-tr{
    border-bottom:1px solid rgb(183, 233, 250);
}
.taro-table-loading-body{
    width: 100%;
    height: 2rem;
    text-align:center;
    animation: rotate 2.5s linear infinite;
    image{
        width:2rem;
        height:100%;
    }
}
@keyframes rotate{
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}