@varlet/ui/es/table/table.css

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

:root { --table-background: #fff; --table-border-radius: 2px; --table-thead-border-bottom: thin solid var(--color-outline); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-text-align: left; --table-thead-th-font-size: 14px; --table-thead-tr-border-bottom: thin solid var(--color-outline); --table-tbody-tr-hover-background: #eee; --table-tbody-tr-border-bottom: thin solid var(--color-outline); --table-tbody-td-text-color: #555; --table-tbody-td-font-size: 16px; --table-tbody-td-text-align: left; --table-row-height: 46px; --table-row-padding: 0 16px; --table-footer-border-top: thin solid var(--color-outline);}.var-table { width: 100%; border-radius: var(--table-border-radius);}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr { background: var(--table-background);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle; background: var(--table-background);}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background); transition: background-color 0.25s;}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { color: var(--table-tbody-td-text-color); font-size: var(--table-tbody-td-font-size);}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: 500; text-align: var(--table-thead-th-text-align);}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: var(--table-tbody-td-text-align);}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top); background: var(--table-background);}