diff --git a/components/JsonToHtml/jsontohtml.module.css b/components/JsonToHtml/jsontohtml.module.css
index d171ab0d5..94e27d4b8 100644
--- a/components/JsonToHtml/jsontohtml.module.css
+++ b/components/JsonToHtml/jsontohtml.module.css
@@ -55,6 +55,10 @@
   display: inline;
 }
 
+.tableContainer {
+  max-width: 100%;
+  overflow-x: auto;
+}
 @media screen and (min-width: 768px) {
   .ol:has(li:nth-last-child(n + 5)),
   .ul:has(li:nth-last-child(n + 5)) {
diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index e435acbee..40122a9a8 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -376,9 +376,11 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <Table key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </Table>
+      <div className={styles.tableContainer}>
+        <Table key={node.uid} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </Table>
+      </div>
     )
   },