@cds/core/table/table.css

Clarity Design System - common components, themes, and utilties

/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
table[cds-table] {
  --background: var(--cds-alias-object-container-background, var(--cds-global-color-white, white));
  --color: var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));
  --border-radius: var(--cds-alias-object-border-radius-100, calc(4 * 1rem / var(--cds-global-base, 20)));
  --border: var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8));
  --header-background: var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));
  --header-border: var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8));
  --row-border: var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-border-color-tint, var(--cds-global-color-construction-100, #e3eaed));
  --column-border: var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-border-color-tint, var(--cds-global-color-construction-100, #e3eaed));
  --cell-padding: var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20)));
}

table[cds-table] {
  background: var(--background);
  color: var(--color);
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}
table[cds-table] td,
table[cds-table] th {
  padding: var(--cell-padding);
  vertical-align: top;
}
table[cds-table] th {
  color: var(--color);
  background: var(--header-background);
}
table[cds-table] td {
  background: var(--background);
}
table[cds-table] tfoot th {
  border-top-width: 0;
}

table[cds-table~="border:all"] tr th,
table[cds-table~="border:row"] tr th {
  border-bottom: var(--header-border);
}
table[cds-table~="border:all"] tr td,
table[cds-table~="border:row"] tr td {
  border-bottom: var(--row-border);
}

table[cds-table~="border:all"] tr th:not(:last-child),
table[cds-table~="border:col"] tr th:not(:last-child) {
  border-right: var(--header-border);
}
table[cds-table~="border:all"] tr td:not(:last-child),
table[cds-table~="border:col"] tr td:not(:last-child) {
  border-right: var(--column-border);
}

table[cds-table~="border:all"] > caption + :nth-child(2) tr:first-of-type th,
table[cds-table~="border:all"] > caption + :nth-child(2) tr:first-of-type td, table[cds-table~="border:all"] > :first-child > tr:first-of-type th,
table[cds-table~="border:all"] > :first-child > tr:first-of-type td,
table[cds-table~="border:outside"] > caption + :nth-child(2) tr:first-of-type th,
table[cds-table~="border:outside"] > caption + :nth-child(2) tr:first-of-type td,
table[cds-table~="border:outside"] > :first-child > tr:first-of-type th,
table[cds-table~="border:outside"] > :first-child > tr:first-of-type td {
  border-top: var(--border);
}
table[cds-table~="border:all"] tr th:first-child,
table[cds-table~="border:all"] tr td:first-child,
table[cds-table~="border:outside"] tr th:first-child,
table[cds-table~="border:outside"] tr td:first-child {
  border-left: var(--border);
}
table[cds-table~="border:all"] tr th:last-child,
table[cds-table~="border:all"] tr td:last-child,
table[cds-table~="border:outside"] tr th:last-child,
table[cds-table~="border:outside"] tr td:last-child {
  border-right: var(--border);
}
table[cds-table~="border:all"] tr:last-child td,
table[cds-table~="border:outside"] tr:last-child td {
  border-bottom: var(--border);
}

table[cds-table] > caption + :nth-child(2) tr:first-of-type :first-child, table[cds-table] > :first-child > tr:first-of-type :first-child {
  border-top-left-radius: var(--border-radius);
}
table[cds-table] > caption + :nth-child(2) tr:first-of-type :last-child, table[cds-table] > :first-child > tr:first-of-type :last-child {
  border-top-right-radius: var(--border-radius);
}
table[cds-table] > *:last-child > tr:last-of-type :first-child {
  border-bottom-left-radius: var(--border-radius);
}
table[cds-table] > *:last-child > tr:last-of-type :last-child {
  border-bottom-right-radius: var(--border-radius);
}

table[cds-table][cds-text~=left] th, table[cds-table][cds-text~=left] td {
  text-align: left;
}
table[cds-table][cds-text~=right] th, table[cds-table][cds-text~=right] td {
  text-align: right;
}
table[cds-table][cds-text~=center] th, table[cds-table][cds-text~=center] td {
  text-align: center;
}

table[cds-table~=compact] {
  --cell-padding: calc(var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) / 2) calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) / 2);
}

table[cds-table~=zebra] {
  --header-background: var(--cds-alias-object-container-background-shade, var(--cds-global-color-construction-100, #e3eaed));
}
table[cds-table~=zebra] tbody tr:nth-child(2n) {
  --background: var(--cds-alias-object-container-background-tint, var(--cds-global-color-construction-50, #f1f6f8));
}

table[cds-table~=vertical] tr td:first-child,
table[cds-table~=vertical] tr th:first-child {
  background: var(--header-background);
  border-right: var(--header-border);
}

table[cds-table] tr[cds-text]::before {
  content: none !important;
}