v2-table/dist/index.css

A simple table component based Vue 2.x

.v2-table-fixed{position:absolute;top:0;overflow:hidden;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.12)}.v2-table-fixed.v2-table__fixed-left{z-index:5;left:0}.v2-table-fixed.v2-table__fixed-right{z-index:7;right:0}.v2-table-fixed__body-wrapper,.v2-table-fixed__footer-wrapper,.v2-table-fixed__header-wrapper{width:100%;overflow:hidden}.v2-table-fixed__left-empty-border{border-left:1px solid #dfe6ec;border-bottom:1px solid #dfe6ec}.v2-table-fixed__left-empty-border .v2-table__header.v2-table__border .v2-table__cell:first-child{border-left:none}.v2-table-fixed__right-empty-border{border-right:1px solid #dfe6ec;border-bottom:1px solid #dfe6ec}.v2-table-fixed__right-empty-border .v2-table__header.v2-table__border .v2-table__cell:first-child{border-left:none}.v2-table-fixed__right-empty-border .v2-table__header.v2-table__border .v2-table__cell:last-child{border-right:none}.v2-table-fixed__right-with-border .v2-table__body.v2-table__border .v2-table__cell:first-child,.v2-table-fixed__right-with-border .v2-table__header.v2-table__border .v2-table__cell:first-child{border-left:none}.v2-table__empty-icon{position:relative;height:60px;width:60px;box-sizing:border-box;background-color:#fff}.v2-table__empty-icon *{box-sizing:border-box}.v2-table__icon--inner{position:relative;height:52px;width:55px;box-sizing:border-box;border:1px solid #c7c7d0;margin:3px 1px;border-radius:2px}.v2-table__icon--inner span{position:absolute;background-color:#fff}.v2-table__icon--inner .inner-circle{position:absolute;right:-8px;bottom:-5px;height:24px;width:24px;border-radius:50%;border:1px solid #c7c7d0}.v2-table__icon--inner .inner-circle:after,.v2-table__icon--inner .inner-circle:before{position:absolute;content:"";left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.v2-table__icon--inner .inner-circle:before{width:2px;height:8px;bottom:10px;background-color:#c7c7d0}.v2-table__icon--inner .inner-circle:after{width:3px;height:3px;border-radius:50%;bottom:5px;background-color:#c7c7d0}.v2-table__icon--inner .inner-rect{top:-4px;height:8px;width:20px;border:1px solid #c7c7d0;border-radius:1px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.v2-table__icon--inner .inner-horizontal-line{background-color:#c7c7d0;height:2px;-webkit-transform:scaleY(.5);transform:scaleY(.5);left:15px}.v2-table__icon--inner .inner-horizontal-line.inner-line1{width:20px;top:15px}.v2-table__icon--inner .inner-horizontal-line.inner-line2{width:15px;top:22px}.v2-table__icon--inner .inner-horizontal-line.inner-line3{width:10px;top:30px}.v2-table{position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box;background-color:#fff;font-size:12px;font-weight:400;color:#606266}.v2-table table,.v2-table tbody,.v2-table td,.v2-table th,.v2-table tr{position:relative;box-sizing:border-box;margin:0;padding:0}.v2-table__table-container,.v2-table__table-wrapper{width:100%;height:100%;overflow:hidden}.v2-table__footer-wrapper,.v2-table__header-wrapper{overflow:hidden}.v2-table__col-group{display:table-column-group}.v2-table__col-group>div{display:table-column}.v2-table__body,.v2-table__footer,.v2-table__header{table-layout:fixed}.v2-table__body.v2-table__border .v2-table__cell,.v2-table__footer.v2-table__border .v2-table__cell,.v2-table__header.v2-table__border .v2-table__cell{border-right:1px solid #ebeef5}.v2-table__body.v2-table__border .v2-table__cell:first-child,.v2-table__footer.v2-table__border .v2-table__cell:first-child,.v2-table__header.v2-table__border .v2-table__cell:first-child{border-left:1px solid #dfe6ec}.v2-table__body.v2-table__header-border,.v2-table__footer.v2-table__header-border,.v2-table__header.v2-table__header-border{border-top:1px solid #dfe6ec}.v2-table__header th{height:40px}.v2-table__body td,.v2-table__footer td{height:44px}.v2-table__body td .cell,.v2-table__footer td .cell{color:#606266;white-space:normal;word-wrap:break-word;word-break:break-all;line-height:1.5}.v2-table__cell{border-bottom:1px solid #ebeef5;cursor:default;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;overflow:hidden;text-align:center}.v2-table__cell.v2-table__column-cell{color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;background-color:#fff}.v2-table__cell.v2-table__column-cell.sortable{cursor:pointer}.v2-table__cell.v2-table__column-cell.descending .descending-caret{border-top:5px solid #ff6200}.v2-table__cell.v2-table__column-cell.ascending .ascending-caret{border-bottom:5px solid #ff6200}.v2-table__cell.v2-table__footer-cell{background-color:#f5f7fa}.v2-table__cell.text-left{text-align:left}.v2-table__cell.text-right{text-align:right}.v2-table__caret-wrapper{position:relative;display:inline-block;width:10px;height:16px;cursor:pointer;margin-left:2px;vertical-align:middle}.v2-table__sort-caret{position:absolute;width:0;height:0;left:0;content:"";z-index:5;border:5px solid transparent}.v2-table__sort-caret.ascending-caret{border-bottom:5px solid #999;top:-3px}.v2-table__sort-caret.descending-caret{border-top:5px solid #999;bottom:-3px}.v2-table__row{background-color:#fff;transition:all .3s cubic-bezier(.645,.045,.355,1);font-size:0}.v2-table__row.row-hover{background-color:#f5f7fa}.v2-table__row.v2-table__row-striped{background-color:#fafbfc}.v2-table__empty-data{position:relative;height:144px;box-sizing:border-box;font-size:12px;color:#909399;text-align:center}.v2-table__empty-data.v2-table__empty-border{border-right:1px solid #dfe6ec;border-left:1px solid #dfe6ec;border-bottom:1px solid #dfe6ec}.v2-table__empty-data .v2-table__empty-default{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.v2-table__empty-data .v2-table__empty-text{display:block}@-webkit-keyframes loading-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loading-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.v2-table__data-loading{position:absolute;font-size:14px;top:0;height:100%;width:100%;z-index:150;background:hsla(0,0%,100%,.7)}.v2-table__data-loading .v2-table__loading-spinner{position:absolute;top:50%;margin-top:-21px;width:100%;text-align:center}.v2-table__data-loading .circular{height:42px;width:42px;-webkit-animation:loading-rotate 2s linear infinite;animation:loading-rotate 2s linear infinite}.v2-table__data-loading .path{-webkit-animation:loading-dash 1.5s ease-in-out infinite;animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#ff6200;stroke-linecap:round}.v2-table__pagination-box{position:relative;width:100%;margin-top:20px;text-align:right;font-size:0}.v2-table__pagination-box .pagination-text-info{position:absolute;left:0;top:0;font-size:12px;color:#999;line-height:32px}.v2-table__pagination{font-size:0;display:inline-block}.v2-table__pagination .page{cursor:pointer;display:inline-block;padding:0 10px;height:32px;line-height:32px;margin-left:5px;font-size:12px;color:#333;border:1px solid #e1e2e6;background:#fff}.v2-table__pagination .page:hover{border-color:#ff6200;color:#ff6200}.v2-table__pagination .page.disabled{cursor:not-allowed;color:#999}.v2-table__pagination .page.disabled:hover{border-color:#ccc}.v2-table__pagination ul{list-style:none;padding:0;margin:0;font-size:0;display:inline-block}.v2-table__pagination ul .cur-page{border-color:#ff6200;background-color:#ff6200;color:#fff}.v2-table__pagination ul .cur-page:hover{color:#fff;border-color:#ff6200}