@visa/nova-styles/components/table/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              Copyright (c) 2025 Visa, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer components{:root,.v-alternate{--v-table-background:var(--palette-default-surface-1);--v-table-border-collapse:collapse;--v-table-display:table;--v-table-foreground:var(--palette-default-text);--v-table-inline-size:100%;--v-table-wrapper-block-size:auto;--v-table-wrapper-inline-size:auto;--v-table-overflow:scroll;--v-table-header-bg-color:var(--palette-default-surface-1);--v-table-header-bg-color-alt:var(--palette-default-surface-highlight);--v-table-header-block:var(--size-scalable-34);--v-table-header-block-alignment:middle;--v-table-header-block-alt:var(--size-scalable-34);--v-table-header-border-block-end-color:var(--palette-default-active);--v-table-header-border-block-end-size:var(--theme-border-size);--v-table-header-border-inline-color-alt:var(--palette-default-border);--v-table-header-border-inline-size-alt:var(--size-scalable-1);--v-table-header-padding-block:var(--size-scalable-8) var(--size-scalable-6);--v-table-header-padding-block-alt:var(--size-scalable-10) var(--size-scalable-9);--v-table-header-padding-inline:var(--size-scalable-15);--v-table-header-padding-inline-alt:var(--size-scalable-15);--v-table-header-text-color:var(--palette-default-active);--v-table-header-text-align-alt:center;--v-table-data-block-default:var(--size-scalable-40);--v-table-data-block-large:var(--size-scalable-56);--v-table-data-block-small:var(--size-scalable-26);--v-table-data-padding-block-default:var(--size-scalable-10);--v-table-data-padding-block-large:var(--size-scalable-17);--v-table-data-padding-block-small:var(--size-scalable-3);--v-table-data-padding-block-badge:calc(var(--v-table-data-padding-block) - var(--size-scalable-2));--v-table-data-padding-inline:var(--size-scalable-15);--v-table-data-text-align:start;--v-table-background-alt:var(--palette-default-surface-2);--v-table-wrapper-border:var(--size-scalable-1) solid var(--palette-default-border);--v-table-border-none:0;--v-table-border-block-end-color:var(--palette-default-border);--v-table-border-block-end-color-default:transparent;--v-table-border-block-end-size-default:var(--size-scalable-1);--v-table-border-block-end-style-default:solid;--v-table-border-block-start-color:var(--palette-default-border);--v-table-border-block-start-color-default:transparent;--v-table-border-block-start-size-default:var(--size-scalable-1);--v-table-border-block-start-style-default:solid;--v-table-border-inline-end-color:var(--palette-default-border);--v-table-border-inline-end-color-default:transparent;--v-table-border-inline-end-size-default:var(--size-scalable-1);--v-table-border-inline-end-style-default:solid;--v-table-border-inline-start-color:var(--palette-default-border);--v-table-border-inline-start-color-default:transparent;--v-table-border-inline-start-size-default:var(--size-scalable-1);--v-table-border-inline-start-style-default:solid;--v-table-border-radius:var(--size-rounded-pill)}}@layer components{.v-td,.v-th-alt,.v-th{border-block-end:var(--v-table-border-block-end-size-default) var(--v-table-border-block-end-style-default) var(--v-table-border-block-end-color-default);border-block-start:var(--v-table-border-block-start-size-default) var(--v-table-border-block-start-style-default) var(--v-table-border-block-start-color-default);border-inline-end:var(--v-table-border-inline-end-size-default) var(--v-table-border-inline-end-style-default) var(--v-table-border-inline-end-color-default);border-inline-start:var(--v-table-border-inline-start-size-default) var(--v-table-border-inline-start-style-default) var(--v-table-border-inline-start-color-default)}.v-td:empty:is(:not(.v-td)),.v-th-alt:empty:is(:not(.v-td)),.v-th:empty:is(:not(.v-td)){border:0}.v-th-alt,.v-th{background-color:var(--v-table-header-bg-color);block-size:var(--v-table-header-block);color:var(--v-table-header-text-color);padding-block:var(--v-table-header-padding-block);padding-inline:var(--v-table-header-padding-inline);text-align:var(--v-table-data-text-align);vertical-align:var(--v-table-header-block-alignment);white-space:nowrap;--v-table-border-block-end-size-default:var(--v-table-header-border-block-end-size);--v-table-border-block-end-color-default:var(--v-table-header-border-block-end-color)}.v-table{border-collapse:var(--v-table-border-collapse);display:var(--v-table-display);inline-size:var(--v-table-inline-size)}.v-table thead{--typography-font-family:var(--typography-label-large-active-font-family);--typography-font-size:var(--typography-label-large-active-font-size);--typography-font-weight:var(--typography-label-large-active-font-weight);--typography-letter-spacing:var(--typography-label-large-active-letter-spacing);--typography-line-height:var(--typography-label-large-active-line-height);--typography-text-decoration:var(--typography-label-large-active-text-decoration);--typography-text-transform:var(--typography-label-large-active-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform)}.v-table tbody{--typography-font-family:var(--typography-label-large-font-family);--typography-font-size:var(--typography-label-large-font-size);--typography-font-weight:var(--typography-label-large-font-weight);--typography-letter-spacing:var(--typography-label-large-letter-spacing);--typography-line-height:var(--typography-label-large-line-height);--typography-text-decoration:var(--typography-label-large-text-decoration);--typography-text-transform:var(--typography-label-large-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform)}.v-table tr{background-color:var(--v-table-background)}.v-table-alt tr:nth-child(even){--v-table-background:var(--v-table-background-alt)}.v-table:has(.v-th-alt) .v-th,.v-table:has(.v-th-alt) .v-th-alt{--v-table-border-inline-end-color-default:var(--v-table-header-border-inline-color-alt);--v-table-border-inline-end-size-default:var(--v-table-border-inline-end-size);--v-table-border-inline-start-color-default:var(--v-table-header-border-inline-color-alt);--v-table-border-block-start-color-default:var(--v-table-border-none)}.v-table:has(.v-th-alt) .v-th:first-child,.v-table:has(.v-th-alt) .v-th-alt:first-child{--v-table-border-inline-start-color-default:var(--v-table-border-none)}.v-table:has(.v-th-alt) .v-th:last-child,.v-table:has(.v-th-alt) .v-th-alt:last-child{--v-table-border-inline-end-color-default:var(--v-table-border-none)}.v-td{block-size:var(--v-table-data-block-default);padding-block:var(--v-table-data-padding-block-default);padding-inline:var(--v-table-data-padding-inline);vertical-align:middle}.v-td:has(.v-badge){--v-table-data-padding-block-default:var(--v-table-data-padding-block-badge)}.v-table-large{--v-table-data-padding-block-default:var(--v-table-data-padding-block-large);--v-table-data-block-default:var(--v-table-data-block-large)}.v-table-small{--v-table-data-padding-block-default:var(--v-table-data-padding-block-small);--v-table-data-block-default:var(--v-table-data-block-small)}.v-table-border{--v-table-border-block-end-color-default:var(--v-table-border-block-end-color);--v-table-border-block-start-color-default:var(--v-table-border-block-start-color);--v-table-border-inline-end-color-default:var(--v-table-border-inline-end-color);--v-table-border-inline-start-color-default:var(--v-table-border-inline-start-color)}.v-table-border-inline{--v-table-border-inline-end-color-default:var(--v-table-border-inline-end-color);--v-table-border-inline-start-color-default:var(--v-table-border-inline-start-color)}.v-table-border-block{--v-table-border-block-end-color-default:var(--v-table-border-block-end-color)}.v-table-border-block .v-th,.v-table-border-block .v-th-alt{--v-table-header-border-inline-color-alt:var(--v-table-border-none)}.v-table-subtle{--v-table-header-text-color:var(--v-table-text-color);--v-table-header-border-block-end-size:var(--v-table-border-block-end-size-default);--v-table-header-border-block-end-color:var(--v-table-border-block-end-color)}.v-table-wrapper{border:var(--v-table-wrapper-border);border-radius:var(--size-scalable-8);max-block-size:var(--v-table-wrapper-block-size);max-inline-size:var(--v-table-wrapper-inline-size);overflow:auto}.v-table-wrapper tr{--v-table-border-block-start-size-default:var(--v-table-border-none)}.v-table-wrapper tr th:first-of-type{--v-table-border-inline-start-size-default:var(--v-table-border-none)}.v-table-wrapper tr td:last-of-type{--v-table-border-inline-end-size-default:var(--v-table-border-none)}.v-table-wrapper tbody>tr:last-of-type{--v-table-border-block-end-size-default:var(--v-table-border-none)}.v-table-wrapper .v-table:is(:not(.v-table-key-value)) th:last-of-type{--v-table-border-inline-end-size-default:var(--v-table-border-none)}.v-table-wrapper .v-table:is(:not(.v-table-key-value)) td:first-of-type{--v-table-border-inline-start-size-default:var(--v-table-border-none)}.v-th-alt{--v-table-data-text-align:var(--v-table-header-text-align-alt);--v-table-header-bg-color:var(--v-table-header-bg-color-alt);--v-table-header-padding-block:var(--v-table-header-padding-block-alt);--v-table-header-padding-inline:var(--v-table-header-padding-inline-alt)}.v-th-alt:empty{--v-table-header-bg-color:none}.v-table-key-value tr>th:first-child{--typography-font-family:var(--typography-label-large-active-font-family);--typography-font-size:var(--typography-label-large-active-font-size);--typography-font-weight:var(--typography-label-large-active-font-weight);--typography-letter-spacing:var(--typography-label-large-active-letter-spacing);--typography-line-height:var(--typography-label-large-active-line-height);--typography-text-decoration:var(--typography-label-large-active-text-decoration);--typography-text-transform:var(--typography-label-large-active-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform);text-align:var(--v-table-data-text-align)}}