refactor(viewer): table styling

src/styles/mdxEditor.scss

@@ -66,8 +66,8 @@
     padding: 0.25em 0.3em;
     outline: none;
 
-    &:empty:before {
+    &:empty::before {
-      content: ' ';
+      content: '\00A0';
     }
   }
 
@@ -99,6 +99,44 @@
   padding-top: 10px;
   min-height: 75px;
 }
+.viewer table {
+  table-layout: fixed;
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  & > tbody > tr > td,
+  & > thead > tr > th {
+    border: 1px solid #e0e1e6;
+    padding: 0.25rem 0.5rem;
+    white-space: normal;
+
+    & > div {
+      outline: none;
+
+      & > p {
+        margin: 0;
+      }
+    }
+
+    & > tbody > tr > td,
+    & > thead > tr > th {
+      [align='left'] {
+        text-align: left;
+      }
+      [align='center'] {
+        text-align: center;
+      }
+      [align='right'] {
+        text-align: right;
+      }
+    }
+
+    &:empty::before {
+      content: '\00A0';
+    }
+  }
+}
 .mdxeditor {
   --baseBg: rgba(255, 255, 255, 0.05);
 }