diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 2a8fed8596f..f12e867dc12 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -43,19 +43,25 @@
 
 .claro-details {
   display: block;
-  /* The following width and min-width values ensure that the <details> element
-   * does not shift widths when opening, in the event that a parent element
-   * constrains the width. This can happen when toggling the "lazy-load" option
-   * within an image field. */
-  width: min-content;
-  min-width: 100%;
   margin-top: var(--space-m);
   margin-bottom: var(--space-m);
   color: var(--color-text);
   border: var(--details-border-size) solid var(--details-border-color);
   border-radius: var(--details-border-size-radius);
   background-color: var(--color-white);
-  box-shadow: var(--details-box-shadow);
+  box-shadow: var(--details-box-shadow)
+
+  /*
+   * The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent table
+   * element constrains the width. This can happen when toggling the
+   * "lazy-load" option within an image field.
+   */
+}
+
+td .claro-details {
+    width: min-content;
+    min-width: 100%
 }
 
 .claro-details--accordion-item,
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index e91c9c6b1c0..e6e7de2792c 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -36,12 +36,6 @@
 
 .claro-details {
   display: block;
-  /* The following width and min-width values ensure that the <details> element
-   * does not shift widths when opening, in the event that a parent element
-   * constrains the width. This can happen when toggling the "lazy-load" option
-   * within an image field. */
-  width: min-content;
-  min-width: 100%;
   margin-top: var(--space-m);
   margin-bottom: var(--space-m);
   color: var(--color-text);
@@ -49,6 +43,17 @@
   border-radius: var(--details-border-size-radius);
   background-color: var(--color-white);
   box-shadow: var(--details-box-shadow);
+
+  /*
+   * The following width and min-width values ensure that the <details> element
+   * does not shift widths when opening, in the event that a parent table
+   * element constrains the width. This can happen when toggling the
+   * "lazy-load" option within an image field.
+   */
+  @nest td & {
+    width: min-content;
+    min-width: 100%;
+  }
 }
 
 .claro-details--accordion-item,