x-data-grid/lib/xDataGrid.css

Vue表格组件,支持搜索、排序、分页、固定列、调整列宽

.x-data-grid{text-align:left;border:1px solid #d8dadc}.x-data-grid table{border-collapse:separate;border-spacing:0;empty-cells:show;table-layout:fixed}.x-data-grid table th{position:sticky;top:0;z-index:3;background-color:#f8f8f9;border-right:1px solid #d8dadc}.x-data-grid table th:last-child{border-right:none}.x-data-grid table td{background-color:#fff}.x-data-grid table td,.x-data-grid table th{padding:4px 6px;border-right:1px solid #d8dadc;border-bottom:1px solid #d8dadc}.x-data-grid table tr.zebra-pattern>td{background-color:#f3f6fa}.x-data-grid table tr.active>td{background-color:#bad5ff}.x-data-grid ::-webkit-scrollbar{width:8px;height:8px}.x-data-grid ::-webkit-scrollbar-thumb{border-radius:10px;box-shadow:none;background:#ccc9d4}.x-data-grid ::-webkit-scrollbar-track{box-shadow:none;border-radius:10px;background:#f8f8f8}.x-data-grid .x-nav-bt{margin:0 5px;border:none}.x-data-grid .x-nav-bt:focus{outline:none}.x-data-grid .x-table-title{background:#f8f8f9;padding:5px 10px;border-bottom:1px solid #d8dadc}.x-data-grid .x-table-title select{background:#fff;font-size:16px;text-align:center;border:none;outline:none;height:24px;line-height:24px;background:#f8f8f9}.x-data-grid .x-table-title option{color:#000;line-height:20px}.x-data-grid .x-table-title option:hover{background:#ebccd1}.x-data-grid .x-table-title input{outline-style:none;border:1px solid #ccc;border-radius:3px;font-size:16px}.x-data-grid [tooltip]{position:relative}.x-data-grid [tooltip]:before{position:absolute;content:attr(tooltip);white-space:pre-line;z-index:20;opacity:0;pointer-events:none;margin-left:15px;margin-top:10px;border:1px solid #ccc;border-radius:5px;padding:5px;font-size:14px;color:#444;background:#fff}.x-data-grid [tooltip]:hover{overflow:auto}.x-data-grid [tooltip]:hover:before{opacity:1}.x-data-grid .group-title{list-style-type:none;display:inline-block;margin-left:10px}.x-data-grid .addBtn{display:inline-block;width:16px;height:16px;border-radius:50%;background-color:#d4d7d7;position:relative;cursor:pointer}.x-data-grid .addBtn:hover{background-color:#00c8c8}.x-data-grid .addBtn.disabledBtn{background-color:#e4e4e4;cursor:not-allowed}.x-data-grid .addBtn:before{content:"";width:8px;height:2px;background-color:#fff;position:absolute;top:7px;left:4px}.x-data-grid .addBtn:after{content:"";width:2px;height:8px;background-color:#fff;position:absolute;top:4px;left:7px}.x-data-grid .subBtn{display:inline-block;width:16px;height:16px;border-radius:50%;background-color:#d4d7d7;position:relative;cursor:pointer}.x-data-grid .subBtn:hover{background-color:#00c8c8}.x-data-grid .subBtn.disabledBtn{background-color:#e4e4e4;cursor:not-allowed}.x-data-grid .subBtn:before{content:"";width:8px;height:2px;background-color:#fff;position:absolute;top:7px;left:4px}