diff --git a/components/data-display.html b/components/data-display.html
index a534ddf..40e86b3 100644
--- a/components/data-display.html
+++ b/components/data-display.html
@@ -56,17 +56,14 @@
- | PE ? |
7.7 |
11.7 |
- | PE Forward ? |
8.6 |
9.7 |
- | PEG Forward ? |
1.23 |
1.43 |
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index b7fa4d9..4d4f0e7 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -196,10 +196,8 @@
| Semantischer Token | Verwendeter Foundation-Token | Beschreibung Verwendungszweck in der Komponente |
| surface-data-table | color-light-grey | Gesamtfläche der Spaltenliste. |
| surface-data-table-cell | color-light-grey | Fläche von Spaltenzellen. |
- | surface-data-table-help-icon | color-medium-grey | Fläche des Help-Icons im Spaltenkontext. |
| text-data-table-default | color-font-dark | Standard-Textfarbe in Spaltenzellen. |
| text-data-table-warning | color-signal-yellow | Warnwertfarbe in Spaltenzellen. |
- | text-data-table-help-icon | color-font-dark | Textfarbe im Spalten-Help-Icon. |
diff --git a/styleguide.css b/styleguide.css
index 4d3d398..17791c1 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2482,6 +2482,7 @@ section + section {
/* ========================================================= */
.sg-data-table {
+ --data-table-column-count: 3;
width: 100%;
border-collapse: collapse;
background: var(--surface-data-table);
@@ -2490,13 +2491,17 @@ section + section {
.sg-data-table th,
.sg-data-table td {
- width: 33.333%;
+ width: calc(100% / var(--data-table-column-count));
padding: 0 0 var(--spacing-small) 0;
border: var(--border-none);
text-align: left;
vertical-align: top;
}
+.sg-data-table[data-component="data-columns"] {
+ --data-table-column-count: 2;
+}
+
.sg-data-table th {
font-family: var(--font-family-base);
font-size: var(--font-size-small);