diff --git a/.changeset/fix-striped-table-custom-backgrounds.md b/.changeset/fix-striped-table-custom-backgrounds.md new file mode 100644 index 000000000..fc4b956ec --- /dev/null +++ b/.changeset/fix-striped-table-custom-backgrounds.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed `.table-striped` and `.table-striped-columns` overriding a row or cell that sets its own background. A `` or `` carrying `.bg-*`, `.table-*`, `.text-bg-*` or an inline `background` now keeps that background instead of being repainted by the stripe. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index d9d427d03..f24b85594 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -1808,6 +1808,8 @@ $table-striped-bg-factor: 0.05 !default; $table-striped-order: even !default; $table-striped-bg: var(--bg-surface-tertiary) !default; $table-striped-columns-order: even !default; +// Rows and cells matching this selector keep their own background instead of the stripe. +$table-striped-exclude-selector: '[class^="bg-"], [class*=" bg-"], [class^="table-"], [class*=" table-"], [class^="text-bg-"], [class*=" text-bg-"], [style*="background"]' !default; $table-group-separator-color: var(--border-color-translucent) !default; diff --git a/core/scss/bootstrap/_tables.scss b/core/scss/bootstrap/_tables.scss index 31de7e304..0f9eee480 100644 --- a/core/scss/bootstrap/_tables.scss +++ b/core/scss/bootstrap/_tables.scss @@ -109,10 +109,13 @@ // Zebra-striping // // Default zebra-stripe styles (alternating gray and transparent backgrounds) +// +// A row or cell that declares its own background wins over the stripe, so +// `.bg-*`, `.table-*`, `.text-bg-*` and inline backgrounds stay visible. // For rows .table-striped { - > tbody > tr:nth-of-type(#{$table-striped-order}) > * { + > tbody > tr:nth-of-type(#{$table-striped-order}):not(:is(#{$table-striped-exclude-selector})) > *:not(:is(#{$table-striped-exclude-selector})) { --table-color-type: var(--table-striped-color); --table-bg-type: var(--table-striped-bg); } @@ -120,7 +123,7 @@ // For columns .table-striped-columns { - > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { + > :not(caption) > tr:not(:is(#{$table-striped-exclude-selector})) > :nth-child(#{$table-striped-columns-order}):not(:is(#{$table-striped-exclude-selector})) { --table-color-type: var(--table-striped-color); --table-bg-type: var(--table-striped-bg); } diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss index 0716693bf..f518bc33c 100644 --- a/core/scss/ui/_tables.scss +++ b/core/scss/ui/_tables.scss @@ -32,6 +32,10 @@ .table { margin-bottom: 0; } + + + .card-footer { + border-top: 0; + } } .table-transparent {