diff --git a/docs/documentation/components/table-expando-row.html b/docs/documentation/components/table-expando-row.html
index 637d45b8..5db0a395 100644
--- a/docs/documentation/components/table-expando-row.html
+++ b/docs/documentation/components/table-expando-row.html
@@ -367,6 +367,27 @@
Instelbare variabelen
Subtitel binnen de openklapbare cel - h2 |
SASS |
+
+ --expando-rows-row-background-color |
+ background-color |
+ transparent |
+ De openklapbare rij |
+ CSS |
+
+
+ --expando-rows-row-striping-background-color |
+ background-color |
+ var(--table-row-background-color-striping, initial) |
+ De openklapbare rij |
+ CSS |
+
+
+ --expando-rows-row-font-weight |
+ font-weight |
+ bold |
+ De openklapbare rij |
+ CSS |
+
diff --git a/manon/table-expando-rows-variables.scss b/manon/table-expando-rows-variables.scss
index f0240fb3..dc19316e 100644
--- a/manon/table-expando-rows-variables.scss
+++ b/manon/table-expando-rows-variables.scss
@@ -16,4 +16,12 @@
/* After breakpoint */
--expando-rows-table-cell-after-breakpoint-padding: 2rem 3rem;
+
+ /* Parent row styling when their content is expanded */
+ --expando-rows-row-background-color: transparent;
+ --expando-rows-row-striping-background-color: var(
+ --table-row-background-color-striping,
+ initial
+ );
+ --expando-rows-row-font-weight: bold;
}
diff --git a/manon/table-expando-rows.scss b/manon/table-expando-rows.scss
index d021e52c..9a4dbcf8 100644
--- a/manon/table-expando-rows.scss
+++ b/manon/table-expando-rows.scss
@@ -43,3 +43,14 @@ table {
}
}
}
+
+.expanded-row {
+ background-color: var(--expando-rows-row-background-color);
+ font-weight: var(--expando-rows-row-font-weight);
+
+ /* Zebra striping with opacity to keep background color. e.g for warnings or errors */
+ &:nth-child(even):not(.odd),
+ &:nth-child(odd).even {
+ background-color: var(--expando-rows-row-striping-background-color);
+ }
+}