fix(#1294203): [ReadOnlyTable] Warning '<tr> cannot appear as a child…

… of a <div>'
Elastic-Suite · Jun 27, 2024 · c694126 · c694126
1 parent a63e496
commit c694126
Showing 1 changed file with 16 additions and 5 deletions.
diff --git 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>