vue-amazing-ui/lib/table/Table.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.table-wrap[data-v-c65cfbcb]{clear:both;max-width:100%}.table-wrap .table-container[data-v-c65cfbcb]{color:#000000e0;font-size:14px;line-height:1.57142857;background:#fff;border-radius:8px 8px 0 0}.table-wrap .table-container .table-header[data-v-c65cfbcb]{border-radius:8px 8px 0 0;padding:16px;transition:padding .3s}.table-wrap .table-container .table-footer[data-v-c65cfbcb]{border-radius:0 0 8px 8px;padding:16px;color:#000000e0;background:#fafafa;transition:padding .3s}.table-wrap .table-container .table-content-container[data-v-c65cfbcb]{position:relative;border-top-left-radius:8px;border-top-right-radius:8px}.table-wrap .table-container .table-content-container[data-v-c65cfbcb]:before{left:0}.table-wrap .table-container .table-content-container[data-v-c65cfbcb]:after{right:0}.table-wrap .table-container .table-content-container[data-v-c65cfbcb]:before,.table-wrap .table-container .table-content-container[data-v-c65cfbcb]:after{position:absolute;top:0;bottom:0;z-index:4;width:30px;transition:box-shadow .3s;content:"";pointer-events:none}.table-wrap .table-container .table-content-container .table-head[data-v-c65cfbcb]{overflow:hidden;border-radius:8px 8px 0 0}.table-wrap .table-container .table-content-container .table-head-sticky[data-v-c65cfbcb]{position:sticky;top:0;z-index:3;background:#fff}.table-wrap .table-container .table-content-container .table-x-scrollbar-sticky[data-v-c65cfbcb]{overflow:visible}.table-wrap .table-container .table-content-container .table-x-scrollbar-sticky[data-v-c65cfbcb] .rail-horizontal-bottom{position:sticky;z-index:3}.table-wrap .table-container .table-content-container table[data-v-c65cfbcb]{display:table;margin:0;width:100%;text-align:start;border-radius:8px 8px 0 0;border-collapse:separate;border-spacing:0}.table-wrap .table-container .table-content-container table tr[data-v-c65cfbcb]{background-color:transparent}.table-wrap .table-container .table-content-container table tr:first-child th[data-v-c65cfbcb]:first-child{border-top-left-radius:8px}.table-wrap .table-container .table-content-container table tr:first-child th[data-v-c65cfbcb]:last-child{border-top-right-radius:8px}.table-wrap .table-container .table-content-container table th[data-v-c65cfbcb],.table-wrap .table-container .table-content-container table td[data-v-c65cfbcb]{border:none}.table-wrap .table-container .table-content-container table th[data-v-c65cfbcb] svg,.table-wrap .table-container .table-content-container table td[data-v-c65cfbcb] svg{fill:CurrentColor}.table-wrap .table-container .table-content-container table .table-th[data-v-c65cfbcb]{color:#000000e0;font-weight:600;text-align:start;background:#fafafa;padding:16px;border-bottom:1px solid #f0f0f0;overflow-wrap:break-word;transition:background .2s ease,padding .3s}.table-wrap .table-container .table-content-container table .table-th[colspan][data-v-c65cfbcb]:not([colspan="1"]){text-align:center}.table-wrap .table-container .table-content-container table .table-th.table-cell-sort[data-v-c65cfbcb]{background:#f0f0f0}.table-wrap .table-container .table-content-container table .table-th-selection[data-v-c65cfbcb]{padding-left:8px;padding-right:8px;text-align:center}.table-wrap .table-container .table-content-container table .table-th-selection .table-selection[data-v-c65cfbcb]{height:22px;vertical-align:top;display:inline-flex;align-items:center}.table-wrap .table-container .table-content-container table .table-th-ellipsis[data-v-c65cfbcb]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.table-wrap .table-container .table-content-container table .table-cell-has-sorter[data-v-c65cfbcb]{outline:none;cursor:pointer;transition:all .3s}.table-wrap .table-container .table-content-container table .table-cell-has-sorter[data-v-c65cfbcb]:hover{background:#f0f0f0}.table-wrap .table-container .table-content-container table .table-cell-has-sorter:hover .table-cell-sorter .table-cell-arrow[data-v-c65cfbcb]:not(.ascend-arrow,.descend-arrow){color:#00000091}.table-wrap .table-container .table-content-container table .table-cell-has-sorter[data-v-c65cfbcb] .tooltip-card-container{cursor:auto}.table-wrap .table-container .table-content-container table .table-cell-has-sorter .table-cell-sorter[data-v-c65cfbcb]{display:flex;align-items:center;justify-content:space-between}.table-wrap .table-container .table-content-container table .table-cell-has-sorter .table-cell-sorter .table-cell-title[data-v-c65cfbcb]{position:relative;z-index:1;flex:1;max-width:calc(100% - 22px)}.table-wrap .table-container .table-content-container table .table-cell-has-sorter .table-cell-sorter .table-cell-arrow[data-v-c65cfbcb]{display:inline-flex;align-items:center;margin-left:4px;color:#0000004a;transition:all .3s}.table-wrap .table-container .table-content-container table .table-cell-has-sorter .table-cell-sorter .table-cell-arrow svg[data-v-c65cfbcb]{fill:currentColor}.table-wrap .table-container .table-content-container table .table-cell-has-sorter .table-cell-sorter .ascend-arrow[data-v-c65cfbcb]{color:#1677ff}.table-wrap .table-container .table-content-container table .table-cell-has-sorter .table-cell-sorter .descend-arrow[data-v-c65cfbcb]{color:#1677ff;transform:rotate(180deg)}.table-wrap .table-container .table-content-container table .table-empty[data-v-c65cfbcb]{padding:16px;border-bottom:1px solid #f0f0f0}.table-wrap .table-container .table-content-container table .table-empty .table-empty-fixed[data-v-c65cfbcb]{padding:16px;margin:-16px -17px;border-right:1px solid #f0f0f0}.table-wrap .table-container .table-content-container table .table-empty .empty[data-v-c65cfbcb]{margin:32px 0}.table-wrap .table-container .table-content-container table .table-td[data-v-c65cfbcb]{padding:16px;border-bottom:1px solid #f0f0f0;transition:padding .3s}.table-wrap .table-container .table-content-container table .table-td.table-cell-sort[data-v-c65cfbcb]{background:#fafafa}.table-wrap .table-container .table-content-container table .table-td .expand-btn[data-v-c65cfbcb]{position:relative;left:-3px;color:inherit;float:left;width:26px;height:26px;line-height:26px;background:#fff;border:1px solid #f0f0f0;border-radius:8px;outline:none;cursor:pointer;transform:scale(.76923077);-webkit-user-select:none;user-select:none;transition:all .3s}.table-wrap .table-container .table-content-container table .table-td .expand-btn[data-v-c65cfbcb]:hover{color:#4096ff;border-color:#4096ff}.table-wrap .table-container .table-content-container table .table-td .expand-btn[data-v-c65cfbcb]:before{position:absolute;top:11px;left:5px;right:5px;height:2px;border-radius:2px;background:currentcolor;transition:transform .3s ease-out;content:""}.table-wrap .table-container .table-content-container table .table-td .expand-btn[data-v-c65cfbcb]:after{position:absolute;top:5px;bottom:5px;left:11px;width:2px;border-radius:2px;transform:rotate(90deg);background:currentcolor;transition:transform .3s ease-out;content:""}.table-wrap .table-container .table-content-container table .table-td .expand-btn-collapsed[data-v-c65cfbcb]:before{transform:rotate(-180deg)}.table-wrap .table-container .table-content-container table .table-td .expand-btn-collapsed[data-v-c65cfbcb]:after{transform:rotate(0)}.table-wrap .table-container .table-content-container table .table-td .table-expand-row-fixed[data-v-c65cfbcb]{position:relative;margin:-16px;padding:16px}.table-wrap .table-container .table-content-container table .table-cell-align-left[data-v-c65cfbcb]{text-align:left}.table-wrap .table-container .table-content-container table .table-cell-align-center[data-v-c65cfbcb]{text-align:center}.table-wrap .table-container .table-content-container table .table-cell-align-right[data-v-c65cfbcb]{text-align:right}.table-wrap .table-container .table-content-container table .table-cell-fix-left[data-v-c65cfbcb]{position:sticky!important;z-index:2;background:#fff}.table-wrap .table-container .table-content-container table .table-th.table-cell-fix-left[data-v-c65cfbcb]{background:#fafafa}.table-wrap .table-container .table-content-container table .table-cell-fix-left-last[data-v-c65cfbcb]:after{position:absolute;top:0;bottom:-1px;right:0;width:30px;transform:translate(100%);transition:box-shadow .3s;content:"";pointer-events:none}.table-wrap .table-container .table-content-container table .table-cell-fix-right[data-v-c65cfbcb]{position:sticky!important;z-index:2;background:#fff}.table-wrap .table-container .table-content-container table .table-th.table-cell-fix-right[data-v-c65cfbcb]{background:#fafafa}.table-wrap .table-container .table-content-container table .table-cell-fix-right-first[data-v-c65cfbcb]:before{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translate(-100%);transition:box-shadow .3s;content:"";pointer-events:none}.table-wrap .table-container .table-content-container table .table-td-hover[data-v-c65cfbcb]{background-color:#fafafa}.table-wrap .table-container .table-content-container table .table-td-expand[data-v-c65cfbcb]{padding-left:14px;padding-right:14px}.table-wrap .table-container .table-content-container table .table-td-expand-row[data-v-c65cfbcb]{background:#00000005}.table-wrap .table-container .table-content-container table .table-td-selection[data-v-c65cfbcb]{padding-left:8px;padding-right:8px;text-align:center}.table-wrap .table-container .table-content-container table .table-td-selection .table-selection[data-v-c65cfbcb]{height:22px;vertical-align:top;display:inline-flex;align-items:center}.table-wrap .table-container .table-header+.table-content-container[data-v-c65cfbcb]{border-top-left-radius:0;border-top-right-radius:0}.table-wrap .table-container .table-header+.table-content-container table[data-v-c65cfbcb]{border-radius:0}.table-wrap .table-container .table-header+.table-content-container table .table-th[data-v-c65cfbcb]:first-child,.table-wrap .table-container .table-header+.table-content-container table .table-th[data-v-c65cfbcb]:last-child{border-radius:0}.table-wrap .table-shadow-left:not(.table-has-fix-left) .table-content-container[data-v-c65cfbcb]:before{box-shadow:inset 10px 0 8px -8px #0505050f}.table-wrap .table-shadow-left .table-content-container .table-cell-fix-left-last[data-v-c65cfbcb]:after{box-shadow:inset 10px 0 8px -8px #0505050f}.table-wrap .table-shadow-right:not(.table-has-fix-right) .table-content-container[data-v-c65cfbcb]:after{box-shadow:inset -10px 0 8px -8px #0505050f}.table-wrap .table-shadow-right .table-content-container .table-cell-fix-right-first[data-v-c65cfbcb]:before{box-shadow:inset -10px 0 8px -8px #0505050f}.table-wrap .table-small[data-v-c65cfbcb]{font-size:14px}.table-wrap .table-small .table-header[data-v-c65cfbcb],.table-wrap .table-small .table-footer[data-v-c65cfbcb],.table-wrap .table-small .table-content-container table .table-th[data-v-c65cfbcb],.table-wrap .table-small .table-content-container table .table-td[data-v-c65cfbcb]{padding:8px}.table-wrap .table-middle[data-v-c65cfbcb]{font-size:14px}.table-wrap .table-middle .table-header[data-v-c65cfbcb],.table-wrap .table-middle .table-footer[data-v-c65cfbcb],.table-wrap .table-middle .table-content-container table .table-th[data-v-c65cfbcb],.table-wrap .table-middle .table-content-container table .table-td[data-v-c65cfbcb]{padding:12px 8px}.table-wrap .table-striped tbody tr:nth-child(2n) .table-td[data-v-c65cfbcb]{background-color:#fafafa}.table-wrap .table-bordered .table-header[data-v-c65cfbcb]{border:1px solid #f0f0f0;border-bottom:0}.table-wrap .table-bordered .table-footer[data-v-c65cfbcb]{border:1px solid #f0f0f0;border-top:0}.table-wrap .table-bordered .table-content-container[data-v-c65cfbcb]{border:1px solid #f0f0f0;border-bottom:0;border-right:0}.table-wrap .table-bordered .table-content-container table th[data-v-c65cfbcb],.table-wrap .table-bordered .table-content-container table td[data-v-c65cfbcb]{border-right:1px solid #f0f0f0}.table-wrap .table-bordered .table-content-container .table-td .table-expand-row-fixed[data-v-c65cfbcb]{margin:-16px -17px}.table-wrap .table-pagination[data-v-c65cfbcb]{margin:16px 0}