@opentiny/vue-theme/table/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-table{--tv-Table-text-color:var(--tv-color-text, #191919);--tv-Table-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Table-hover-bg-color:var(--tv-color-bg-hover, #f5f5f5);--tv-Table-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Table-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Table-nodata-text-color:var(--tv-color-text-weaken, #808080);--tv-Table-td-height:var(--tv-size-height-lg, 40px);--tv-Table-td-font-size:var(--tv-font-size-default, 14px);--tv-Table-border-color:var(--tv-color-border-divider, #f0f0f0);--tv-Table-icon-border-color:var(--tv-color-border, #c2c2c2);--tv-Table-thead-bg-color:var(--tv-color-bg-header, #f5f5f5);--tv-Table-icon-font-size:var(--tv-font-size-lg, 16px);--tv-Table-check-icon-color:var(--tv-color-icon-control-active, #1476ff);--tv-Table-half-check-icon-color:var(--tv-color-text-inverse, #ffffff);--tv-Table-check-icon-border-radius:var(--tv-border-radius-sm, 4px)}.tiny-table.simple table{table-layout:fixed}.tiny-table.simple table tr{display:table-row;vertical-align:inherit;border-color:inherit;border-bottom:1px solid var(--tv-Table-border-color)}.tiny-table.simple table tbody tr{color:var(--tv-Table-text-color);background:var(--tv-Table-bg-color)}.tiny-table.simple table tbody tr:hover{background:var(--tv-Table-hover-bg-color)}.tiny-table.simple table tbody tr.is-disabled{background:var(--tv-Table-disabled-bg-color);color:var(--tv-Table-disabled-text-color);cursor:not-allowed}.tiny-table.simple table tbody .noData:hover{background:0 0}.tiny-table.simple table tbody .noData td{height:160px;text-align:center;vertical-align:middle;color:var(--tv-Table-nodata-text-color);background-color:transparent}.tiny-table.simple table th{padding:2px 0 2px 8px;height:var(--tv-Table-td-height);vertical-align:middle;border-left:none}.tiny-table.simple table td{padding:2px 0 2px 8px;height:var(--tv-Table-td-height);vertical-align:middle;font-size:var(--tv-Table-td-font-size)}.tiny-table.simple table td .overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tiny-table.simple table thead{border-bottom:1px solid var(--tv-Table-border-color);text-align:left;background:var(--tv-Table-thead-bg-color);color:var(--tv-Table-text-color)}.tiny-table.simple table thead th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--tv-Table-td-font-size);color:var(--tv-Table-text-color);line-height:1.7em}.tiny-table.simple table thead th .overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tiny-table.simple .tiny-table-header__line{float:right;border-left:1px solid var(--tv-Table-border-color);height:20px}.tiny-table.simple .tiny-table-cell .tiny-svg{font-size:var(--tv-Table-icon-font-size);border-radius:var(--tv-Table-check-icon-border-radius)}.tiny-table.simple .tiny-table-cell .tiny-svg path:last-child{fill:var(--tv-Table-icon-border-color)}.tiny-table.simple .tiny-table-cell .tiny-svg path:first-child{fill:transparent}.tiny-table.simple .tiny-table-cell .tiny-svg.is-check path:last-child{fill:var(--tv-Table-half-check-icon-color)}.tiny-table.simple .tiny-table-cell .tiny-svg.is-check path:first-child{fill:var(--tv-Table-check-icon-color)}