From c694126afdbd2c37d3a8a33c4e3a6c8f88e13703 Mon Sep 17 00:00:00 2001
From: Matthias GOUPIL <matthiasgoup@gmail.com>
Date: Thu, 27 Jun 2024 16:10:03 +0200
Subject: [PATCH] fix(#1294203): [ReadOnlyTable] Warning '<tr> cannot appear as
 a child of a <div>'

---
 .../ReadOnlyTable/ReadOnlyTable.styled.tsx    | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/atoms/ReadOnlyTable/ReadOnlyTable.styled.tsx b/packages/components/src/components/atoms/ReadOnlyTable/ReadOnlyTable.styled.tsx
index 7b749aaf..b983edac 100644
--- a/packages/components/src/components/atoms/ReadOnlyTable/ReadOnlyTable.styled.tsx
+++ b/packages/components/src/components/atoms/ReadOnlyTable/ReadOnlyTable.styled.tsx
@@ -37,6 +37,13 @@ export const StyledTable = styled('table')(({ theme }) => ({
 
   '.subRows > td': {
     borderBottom: 'none',
+
+    table: {
+      display: 'block',
+      width: '100%',
+      borderCollapse: 'collapse',
+      border: 'none',
+    },
   },
 
   '.subRow': {
@@ -151,11 +158,15 @@ export function ReadOnlyTableRow({
         <tr className="subRows">
           <td style={{ padding: 0 }} colSpan={row.cells.length + 1}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              {row.subRows?.map(
-                (subRow): JSX.Element => (
-                  <ReadOnlyTableRow key={subRow?.id} row={subRow} subRow />
-                )
-              )}
+              <table>
+                <tbody>
+                  {row.subRows?.map(
+                    (subRow): JSX.Element => (
+                      <ReadOnlyTableRow key={subRow?.id} row={subRow} subRow />
+                    )
+                  )}
+                </tbody>
+              </table>
             </Collapse>
           </td>
         </tr>