Orange-OpenSource · julien-deramond · Nov 6, 2023 · Oct 31, 2023 · Nov 6, 2023 · Nov 6, 2023
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -150,6 +150,10 @@
   --#{$prefix}icon-filter: none;
   --#{$prefix}select-indicator: #{$form-select-indicator};
   --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator};
+  --#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
+  --#{$prefix}table-striped-hover-bg-factor: #{$table-striped-hover-bg-factor};
+  --#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
+  --#{$prefix}table-active-bg-factor: #{$table-active-bg-factor};
   // ******* End additions for dark-mode
 }
 
@@ -238,6 +242,10 @@
     --#{$prefix}icon-filter: #{$invert-filter};
     --#{$prefix}select-indicator: #{$form-select-indicator-dark};
     --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark};
+    --#{$prefix}table-striped-bg-factor: .135; // .2 if solid bg
+    --#{$prefix}table-striped-hover-bg-factor: .855; // .865 if solid bg
+    --#{$prefix}table-hover-bg-factor: .135; // .2 if solid bg
+    --#{$prefix}table-active-bg-factor: .565; // .6 if solid bg
     // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -888,21 +888,21 @@ $table-th-font-weight:                  null !default;
 
 $table-striped-color:                   $table-color !default;
 $table-striped-bg-factor:               .065 !default; // Boosted mod
-$table-striped-bg:                      rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
-$table-striped-hover-color:             $table-color !default; // Boosted mod
+$table-striped-bg:                      rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-bg-factor)) !default;
+$table-striped-hover-color:             var(--#{$prefix}black) !default; // Boosted mod
 $table-striped-hover-bg-factor:         .4 !default; // Boosted mod
-$table-striped-hover-bg:                rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-hover-bg-factor) !default; // Boosted mod
+$table-striped-hover-bg:                rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-striped-hover-bg-factor)) !default; // Boosted mod
 $table-variant-striped-bg-factor:       .2 !default; // Boosted mod
 $table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod
 
-$table-active-color:                    $table-color !default;
+$table-active-color:                    var(--#{$prefix}black) !default; // Boosted mod: instead of `$table-color`
 $table-active-bg-factor:                .135 !default; // Boosted mod
-$table-active-bg:                       rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+$table-active-bg:                       rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // Boosted mod: instead of `$table-active-bg-factor`
 $table-variant-active-bg-factor:        .6 !default; // Boosted mod
 
 $table-hover-color:                     $table-color !default;
 $table-hover-bg-factor:                 .065 !default; // Boosted mod
-$table-hover-bg:                        rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg:                        rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-hover-bg-factor)) !default; // Boosted mod: instead of `$table-hover-bg-factor`
 $table-variant-hover-bg-factor:         .2 !default; // Boosted mod
 
 $table-border-factor:                   .4 !default; // Boosted mod

diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
@@ -914,7 +914,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+            <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
             Cell text
           </td>
           <td>Cell text</td>
@@ -951,7 +951,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
             </div>
           </td>
           <td>
-            <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+            <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
             Cell text
           </td>
           <td>Cell text</td>
@@ -1068,7 +1068,7 @@ Use SVG or PNG to display icons or thumbnails in your compact table data cell el
   <table class="table table-sm table-hover align-middle has-checkbox">
     ...
     <td>
-      <img src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
+      <img style="filter: var(--bs-icon-filter)" src="/docs/{{< param docs_version >}}/assets/img/thumbnail.png" alt="Thumbnail" width="30" height="30" class="me-2">
       Cell text
     </td>
     ...

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -5581,3 +5581,382 @@ sitemap_exclude: true
   <div class="form-check"><input class="form-check-input is-invalid" type="radio" value="" checked data-bs-theme="light"><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
   <div class="quantity-selector w-100" data-bs-theme="light"><input type="number" class="form-control is-invalid" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector"><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="down"><span class="visually-hidden">Step down</span></button><button type="button" class="btn btn-icon btn-outline-secondary" data-bs-step="up"><span class="visually-hidden">Step up</span></button><p class="mb-0 invalid-feedback" data-bs-theme="light">Invalid feedback</p></div>
 </div>
+
+## Contents
+
+### Tables
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <table class="table table-hover mb-5">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <table class="table table-hover mb-5">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <table class="table table-hover mb-5">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <table class="table table-hover mb-5" data-bs-theme="dark">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="dark">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover" data-bs-theme="dark">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <table class="table table-hover mb-5" data-bs-theme="light">
+    <caption>Boosted tables basic and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover caption-bottom mb-5" data-bs-theme="light">
+    <caption>Boosted tables striped and hover look</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+      <tr><th scope="row">2</th><td>Active</td><td class="table-active">Cell</td><td>@activeCell</td></tr>
+      <tr><th scope="row">3</th><td colspan="2">Random</td><td>@random</td></tr>
+      <tr><th scope="row">4</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+      <tr><th scope="row">5</th><td>Ring of</td><td>Kerry</td><td>@ireland</td></tr>
+    </tbody>
+  </table>
+  <table class="table table-striped table-hover" data-bs-theme="light">
+    <caption>Boosted tables when nested</caption>
+    <thead>
+      <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+    </thead>
+    <tbody>
+      <tr class="table-active"><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in active row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+      <tr><td colspan="4">
+        <table class="table table-hover mb-0">
+          <caption>Boosted nested table in striped row</caption>
+          <thead>
+            <tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr>
+          </thead>
+          <tbody>
+            <tr class="table-active"><th scope="row">1</th><td>Active</td><td>Row</td><td>@activeRow</td></tr>
+            <tr><th scope="row">2</th><td>Skye</td><td>Island</td><td>@scotland</td></tr>
+          </tbody>
+        </table>
+      </td></tr>
+    </tbody>
+  </table>
+</div>