pd-design/lib/components/table/Table.css

产品组件库

[data-v-6f805cf6]:root{--pd-white: #ffffff;--pd-primary-1: #e8f3ff;--pd-primary-2: #bedaff;--pd-primary-3: #94bfff;--pd-primary-4: #6aa1ff;--pd-primary-5: #29b8fd;--pd-primary-6: #1c7ffd;--pd-primary-7: #0f52be;--pd-primary-1-10: rgba(232, 243, 255, 10%);--pd-primary-2-10: rgba(190, 218, 255, 10%);--pd-primary-3-10: rgba(148, 191, 255, 10%);--pd-primary-4-10: rgba(106, 161, 255, 10%);--pd-primary-5-10: rgba(41, 184, 253, 10%);--pd-primary-6-10: rgba(28, 127, 253, 10%);--pd-primary-7-10: rgba(15, 82, 190, 10%);--pd-neutral-1: #ffffff;--pd-neutral-2: #f7f8fa;--pd-neutral-3: #f2f3f5;--pd-neutral-4: #e4e7ed;--pd-neutral-5: #c0c4cc;--pd-neutral-6: #909399;--pd-neutral-7: #606266;--pd-neutral-8: #303133;--pd-neutral-9: #434343;--pd-neutral-10: #606266;--pd-neutral-11: #1f1f1f;--pd-neutral-12: #000000;--pd-fill-0: #000000;--pd-fill-1: #ffffff;--pd-fill-2: #f7f8fa;--pd-fill-3: #f2f3f5;--pd-fill-4: #e4e7ed;--pd-fill-5: #c0c4cc;--pd-fill-6: #606266;--pd-gray-1: #ffffff;--pd-gray-2: #fafafa;--pd-gray-3: #f5f5f5;--pd-gray-4: #f0f0f0;--pd-gray-5: #d9d9d9;--pd-gray-6: #bfbfbf;--pd-gray-7: #8c8c8c;--pd-gray-8: #595959;--pd-gray-9: #434343;--pd-gray-10: #262626;--pd-gray-11: #1f1f1f;--pd-gray-12: #141414;--pd-gray-13: #000000;--pd-text-0: #121212;--pd-text-1: #ffffff;--pd-text-2: #c0c4cc;--pd-text-3: #909399;--pd-text-4: #606266;--pd-text-5: #303133;--pd-text-1-2: #c0c4cc;--pd-input-padding-base: 4px 11px;--pd-input-padding-lg: 6px 11px;--pd-input-padding-sm: 0 7px;--pd-input-border-radius: 4px;--pd-input-bg-color: var(--pd-neutral-1);--pd-input-disabled-bg: var(--pd-fill-2);--pd-input-placeholder-color: var(--pd-text-2);--pd-input-hover-border-color: var(--pd-primary-4);--pd-input-focus-border-color: var(--pd-primary-4);--pd-input-focus-shadow: 0 0 0 2px rgba(28, 127, 253, 20%);--pd-success-1: #e8ffea;--pd-success-2: #a7f0b5;--pd-success-3: #7de188;--pd-success-4: #83d94d;--pd-success-5: #47d48a;--pd-success-6: #11b66d;--pd-success-1-10: rgba(232, 255, 234, 10%);--pd-success-2-10: rgba(167, 240, 181, 10%);--pd-success-3-10: rgba(125, 225, 136, 10%);--pd-success-4-10: rgba(131, 217, 77, 10%);--pd-success-5-10: rgba(71, 212, 138, 10%);--pd-success-6-10: rgba(17, 182, 109, 10%);--pd-warning-1: #fff7e8;--pd-warning-2: #ffe4ba;--pd-warning-3: #ffcfb8;--pd-warning-4: #e38535;--pd-warning-5: #ffbf4f;--pd-warning-6: #ff9a09;--pd-warning-1-10: rgba(255, 247, 232, 10%);--pd-warning-2-10: rgba(255, 228, 186, 10%);--pd-warning-3-10: rgba(255, 207, 184, 10%);--pd-warning-4-10: rgba(227, 133, 53, 10%);--pd-warning-5-10: rgba(255, 191, 79, 10%);--pd-warning-6-10: rgba(255, 154, 9, 10%);--pd-error-1: #ffdcd5;--pd-error-2: #fddcd5;--pd-error-3: #fbaca3;--pd-error-4: #cf1322;--pd-error-5: #ff7875;--pd-error-6: #ff414f;--pd-error-1-10: rgba(255, 220, 213, 10%);--pd-error-2-10: rgba(253, 220, 213, 10%);--pd-error-3-10: rgba(251, 172, 163, 10%);--pd-error-4-10: rgba(207, 19, 34, 10%);--pd-error-5-10: rgba(255, 120, 117, 10%);--pd-error-6-10: rgba(255, 65, 79, 10%);--pd-primary-color: var(--pd-primary-6);--pd-primary-color-hover: var(--pd-primary-5);--pd-primary-color-active: var(--pd-primary-7);--pd-primary-color-disabled: rgba(28, 127, 253, 45%);--pd-primary-color-outline: rgba(28, 127, 253, 20%);--pd-success-color: var(--pd-success-6);--pd-success-color-hover: var(--pd-success-5);--pd-success-color-active: var(--pd-success-4);--pd-success-color-disabled: rgba(17, 182, 109, 45%);--pd-success-color-outline: rgba(17, 182, 109, 20%);--pd-warning-color: var(--pd-warning-6);--pd-warning-color-hover: var(--pd-warning-5);--pd-warning-color-active: var(--pd-warning-4);--pd-warning-color-disabled: rgba(255, 154, 9, 45%);--pd-warning-color-outline: rgba(255, 154, 9, 20%);--pd-error-color: var(--pd-error-6);--pd-error-color-hover: var(--pd-error-5);--pd-error-color-active: var(--pd-error-4);--pd-error-color-disabled: rgba(255, 65, 79, 45%);--pd-error-color-outline: rgba(255, 65, 79, 20%);--pd-info-color: var(--pd-primary-6);--pd-info-color-hover: var(--pd-primary-5);--pd-info-color-active: var(--pd-primary-7);--pd-info-color-disabled: rgba(28, 127, 253, 45%);--pd-info-color-outline: rgba(28, 127, 253, 20%);--pd-default-color: var(--pd-neutral-1);--pd-default-color-hover: var(--pd-neutral-1);--pd-default-color-active: var(--pd-neutral-3);--pd-default-color-disabled: var(--pd-neutral-3);--pd-default-border-color: var(--pd-neutral-5);--pd-default-text-color: var(--pd-neutral-7);--pd-default-hover-border-color: var(--pd-primary-6);--pd-default-active-border-color: var(--pd-primary-7);--pd-text-color: var(--pd-neutral-7);--pd-text-color-secondary: var(--pd-neutral-6);--pd-text-color-placeholder: var(--pd-neutral-5);--pd-text-color-disabled: var(--pd-neutral-5);--pd-heading-color: var(--pd-text-5);--pd-text-color-inverse: var(--pd-neutral-1);--pd-text-color-link: var(--pd-primary-color);--pd-text-color-link-hover: var(--pd-primary-color-hover);--pd-text-color-link-active: var(--pd-primary-color-active);--pd-text-color-warning: var(--pd-warning-color);--pd-text-color-success: var(--pd-success-color);--pd-text-color-error: var(--pd-error-color);--pd-bg-color: var(--pd-neutral-1);--pd-bg-color-light: var(--pd-neutral-2);--pd-bg-color-lighter: var(--pd-neutral-3);--pd-component-bg: var(--pd-neutral-1);--pd-hover-bg-color: var(--pd-neutral-3);--pd-active-bg-color: var(--pd-neutral-4);--pd-disabled-bg-color: var(--pd-neutral-2);--pd-success-bg-color: var(--pd-success-1);--pd-warning-bg-color: var(--pd-warning-1);--pd-error-bg-color: var(--pd-error-1);--pd-info-bg-color: var(--pd-primary-1);--pd-border-color: var(--pd-neutral-5);--pd-border-color-light: var(--pd-neutral-4);--pd-border-color-lighter: var(--pd-neutral-3);--pd-border-color-extra-light: var(--pd-neutral-2);--pd-border-color-split: var(--pd-neutral-4);--pd-border-width-base: 1px;--pd-border-style-base: solid;--pd-border-radius-base: 4px;--pd-border-radius: var(--pd-border-radius-base);--pd-border-radius-sm: 2px;--pd-border-radius-md: 4px;--pd-border-radius-lg: 8px;--pd-border-radius-xl: 12px;--pd-border-radius-xxl: 16px;--pd-border-radius-round: 20px;--pd-border-radius-circle: 50%;--pd-border-color-hover: var(--pd-primary-6);--pd-border-color-active: var(--pd-primary-7);--pd-border-color-disabled: var(--pd-neutral-4);--pd-box-shadow: 0 2px 8px rgba(0, 0, 0, 15%);--pd-box-shadow-light: 0 2px 4px rgba(0, 0, 0, 12%);--pd-box-shadow-lighter: 0 1px 2px rgba(0, 0, 0, 8%);--pd-box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 20%);--pd-shadow-1-up: 0 -2px 6px rgba(0, 0, 0, 12%);--pd-shadow-1-down: 0 2px 6px rgba(0, 0, 0, 12%);--pd-shadow-1-left: -2px 0 6px rgba(0, 0, 0, 12%);--pd-shadow-1-right: 2px 0 6px rgba(0, 0, 0, 12%);--pd-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 12%), 0 6px 16px 0 rgba(0, 0, 0, 8%), 0 9px 28px 8px rgba(0, 0, 0, 5%);--pd-shadow-3: 0 6px 16px -8px rgba(0, 0, 0, 8%), 0 9px 28px 0 rgba(0, 0, 0, 5%), 0 12px 48px 16px rgba(0, 0, 0, 3%);--pd-code-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--pd-font-size-small: 12px;--pd-font-size-base: 14px;--pd-font-size-large: 16px;--pd-font-size-l: 18px;--pd-font-size-xl: 20px;--pd-font-size-xxl: 24px;--pd-heading-1-size: 38px;--pd-heading-2-size: 30px;--pd-heading-3-size: 24px;--pd-heading-4-size: 20px;--pd-heading-5-size: 16px;--pd-line-height-small: 20px;--pd-line-height-base: 22px;--pd-line-height-large: 24px;--pd-line-height-xl: 28px;--pd-line-height-xxl: 32px;--pd-font-weight-regular: 400;--pd-font-weight-medium: 500;--pd-font-weight-semibold: 600;--pd-font-weight-bold: 700;--pd-spacing-unit: 4px;--pd-spacing-xs: 4px;--pd-spacing-sm: 8px;--pd-spacing-md: 16px;--pd-spacing-lg: 24px;--pd-spacing-xl: 32px;--pd-spacing-xxl: 40px;--pd-spacing-compact-unit: 2px;--pd-spacing-compact-xs: 2px;--pd-spacing-compact-sm: 4px;--pd-spacing-compact-md: 8px;--pd-spacing-compact-lg: 12px;--pd-spacing-compact-xl: 16px;--pd-spacing-compact-xxl: 18px;--pd-spacing-compact-xxxl: 20px;--pd-animation-duration-fast: .2s;--pd-animation-duration-base: .3s;--pd-animation-duration-slow: .4s;--pd-animation-timing-function-ease: cubic-bezier(.645, .045, .355, 1);--pd-animation-timing-function-ease-in: cubic-bezier(.55, .055, .675, .19);--pd-animation-timing-function-ease-out: cubic-bezier(.215, .61, .355, 1);--pd-animation-timing-function-ease-in-out: cubic-bezier(.645, .045, .355, 1);--pd-zindex-dropdown: 1050;--pd-zindex-sticky: 1020;--pd-zindex-fixed: 1030;--pd-zindex-modal-backdrop: 1040;--pd-zindex-modal: 1060;--pd-zindex-popover: 1070;--pd-zindex-tooltip: 1080;--pd-zindex-notification: 1090;--pd-zindex-drawer: 1050;--pd-btn-padding-sm: 0 8px;--pd-btn-padding-base: 0 16px;--pd-btn-padding-lg: 0 24px;--pd-btn-height-sm: 24px;--pd-btn-height-base: 32px;--pd-btn-height-lg: 40px;--pd-btn-font-weight: 400;--pd-btn-font-size-sm: 12px;--pd-btn-font-size-base: 14px;--pd-btn-font-size-lg: 16px;--pd-btn-border-radius: 2px;--pd-btn-border-width: 1px;--pd-btn-disabled-opacity: .65;--pd-btn-focus-shadow: 0 0 0 2px var(--pd-primary-color-outline);--pd-btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 12%);--pd-btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%);--pd-btn-primary-color: #fff;--pd-btn-primary-bg: var(--pd-primary-color);--pd-btn-primary-border-color: var(--pd-primary-color);--pd-btn-default-ghost-color: var(--pd-component-bg);--pd-btn-default-ghost-border-color: var(--pd-component-bg);--pd-btn-text-hover-bg: rgba(0, 0, 0, 4%);--pd-form-item-margin-bottom: 16px;--pd-form-vertical-label-padding: 0 0 4px;--pd-form-vertical-label-margin: 0;--pd-form-item-label-font-size: var(--pd-font-size-base);--pd-form-item-label-height: var(--pd-input-height-base);--pd-form-item-label-color: var(--pd-text-color);--pd-form-item-required-color: var(--pd-error-color);--pd-form-item-error-color: var(--pd-error-color);--pd-form-item-error-line-height: var(--pd-line-height-base);--pd-form-item-help-color: var(--pd-text-color-secondary);--pd-form-item-help-line-height: var(--pd-line-height-base);--pd-input-height-sm: 24px;--pd-input-height-base: 32px;--pd-input-height-lg: 40px;--pd-input-padding-sm: 0 4px;--pd-input-padding-base: 0 8px;--pd-input-padding-lg: 0 16px;--pd-input-border-width: var(--pd-border-width-base);--pd-input-border-style: var(--pd-border-style-base);--pd-input-border-color: var(--pd-border-color);--pd-input-border-color-disabled: var(--pd-border-color-disabled);--pd-input-icon-color: var(--pd-text-color-secondary);--pd-input-clear-icon-color: var(--pd-text-color-secondary);--pd-input-hover-icon-color: var(--pd-text-color);--pd-input-prefix-padding: 0 8px 0 0;--pd-input-suffix-padding: 0 0 0 8px;--pd-input-number-handler-border-color: var(--pd-border-color-light);--pd-input-number-handler-bg: var(--pd-component-bg);--pd-input-number-handler-hover-bg: var(--pd-hover-bg-color);--pd-input-number-handler-active-bg: var(--pd-active-bg-color);--pd-tabs-bar-margin: 0 0 16px 0;--pd-tabs-nav-height-sm: 32px;--pd-tabs-nav-height-base: 40px;--pd-tabs-nav-height-lg: 48px;--pd-tabs-horizontal-padding: 12px 16px;--pd-tabs-horizontal-margin: 0 32px 0 0;--pd-tabs-vertical-padding: 8px 24px;--pd-tabs-vertical-margin: 0 0 8px 0;--pd-tabs-ink-bar-color: var(--pd-primary-6);--pd-tabs-active-color: var(--pd-primary-6);--pd-tabs-hover-color: var(--pd-primary-5);--pd-tabs-card-bg: var(--pd-fill-3);--pd-tabs-card-active-bg: var(--pd-fill-1);--pd-tabs-content-padding: 16px;--pd-tabs-highlight-color: var(--pd-primary-color);--pd-tabs-card-height: 40px;--pd-tabs-card-gutter: 2px;--pd-tabs-nav-container-scrolling-padding: 32px;--pd-tabs-bar-height: 44px;--pd-card-head-padding: 16px;--pd-card-padding-base: 24px;--pd-card-padding-sm: 12px;--pd-card-padding-lg: 32px;--pd-card-border-radius: var(--pd-border-radius-lg);--pd-card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 4%), 0 3px 6px 0 rgba(0, 0, 0, 2%), 0 5px 12px 4px rgba(0, 0, 0, 1%);--pd-table-header-bg: var(--pd-neutral-2);--pd-table-header-color: var(--pd-neutral-7);--pd-table-header-height: 48px;--pd-table-row-hover-bg: var(--pd-neutral-3);--pd-table-row-selected-bg: var(--pd-primary-1);--pd-table-header-bg-sm: var(--pd-neutral-3);--pd-table-border-color: var(--pd-border-color);--pd-table-border-color-split: var(--pd-border-color-split);--pd-table-row-hover-bg: var(--pd-hover-bg-color);--pd-table-header-sort-bg: var(--pd-hover-bg-color);--pd-table-header-filter-bg: var(--pd-hover-bg-color);--pd-table-filter-dropdown-bg: var(--pd-component-bg);--pd-table-expand-icon-bg: var(--pd-component-bg);--pd-table-row-padding-vertical: 13px;--pd-table-row-padding-horizontal: 16px;--pd-table-padding-vertical-sm: 8px;--pd-table-padding-horizontal-sm: 8px;--pd-table-padding-vertical-md: 12px;--pd-table-padding-horizontal-md: 12px;--pd-table-padding-vertical-lg: 16px;--pd-table-padding-horizontal-lg: 16px;--pd-table-fixed-header-sort-active-bg: rgba(0, 0, 0, 1%)}.pd-table[data-v-6f805cf6]{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.pd-table-form[data-v-6f805cf6]{flex-shrink:0;margin-bottom:var(--pd-spacing-md);border-radius:var(--pd-border-radius)}.pd-table-wrapper[data-v-6f805cf6]{flex:1;display:flex;flex-direction:column;padding:var(--pd-spacing-lg);border-radius:var(--pd-border-radius);background:var(--pd-component-bg);box-shadow:0 6px 16px #00000005;min-height:300px}.pd-table-container[data-v-6f805cf6]{position:relative;flex:1;overflow:hidden}.pd-table-container .ant-table-wrapper[data-v-6f805cf6],.pd-table-container .ant-table-wrapper .ant-table[data-v-6f805cf6]{height:100%}.pd-table-container .ant-table-wrapper .ant-table-container[data-v-6f805cf6]{height:100%;display:flex;flex-direction:column}.pd-table-container .ant-table-wrapper .ant-table-body[data-v-6f805cf6]{background-color:red}.pd-table-actions[data-v-6f805cf6]:not(:empty){flex-shrink:0;margin-bottom:var(--pd-spacing-compact-xxl)}.pd-table-pagination[data-v-6f805cf6]{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding-top:var(--pd-spacing-lg);color:var(--pd-text-color);background:var(--pd-component-bg);flex-wrap:wrap}.pd-table-pagination-info[data-v-6f805cf6]{font-size:var(--pd-font-size-small)}