diff --git a/e2e/fixtures/auto-nav-sidebar/doc/guide/index.mdx b/e2e/fixtures/auto-nav-sidebar/doc/guide/index.mdx
index 8c0d02fad..4388b6e13 100644
--- a/e2e/fixtures/auto-nav-sidebar/doc/guide/index.mdx
+++ b/e2e/fixtures/auto-nav-sidebar/doc/guide/index.mdx
@@ -1 +1,59 @@
 # Guide
+
+- list item 1
+- list item 2
+
+<ul>
+  <li>list item 1</li>
+  <li>list item 2</li>
+</ul>
+
+| Header 1 | Header 2 |
+| -------- | -------- |
+| Data 1   | Data 2   |
+| Data 1   | Data 2   |
+
+<table>
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+  </tbody>
+</table>
+
+<div className="rp-not-doc">
+<ul>
+  <li>list item 1</li>
+  <li>list item 2</li>
+</ul>
+
+<table>
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+  </tbody>
+</table>
+</div>
diff --git a/packages/plugin-playground/static/global-components/Playground.tsx b/packages/plugin-playground/static/global-components/Playground.tsx
index 441aae8ba..734c7c7e8 100644
--- a/packages/plugin-playground/static/global-components/Playground.tsx
+++ b/packages/plugin-playground/static/global-components/Playground.tsx
@@ -82,8 +82,11 @@ export default function Playground(props: PlaygroundProps) {
     'rspress-playground',
     `rspress-playground-${direction}`,
     `rspress-playground-reverse-${useReverseLayout ? 'y' : 'n'}`,
+    'rp-not-doc',
     className,
-  ].join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <div className={classNames} {...rest}>
diff --git a/packages/plugin-preview/static/global-components/Container.tsx b/packages/plugin-preview/static/global-components/Container.tsx
index b5ec69b54..dd56376fa 100644
--- a/packages/plugin-preview/static/global-components/Container.tsx
+++ b/packages/plugin-preview/static/global-components/Container.tsx
@@ -43,7 +43,7 @@ const Container: React.FC<ContainerProps> = props => {
 
   return (
     <NoSSR>
-      <div className="rspress-preview">
+      <div className="rspress-preview rp-not-doc">
         {isMobile === 'true' ? (
           <div className="rspress-preview-wrapper">
             <div className="rspress-preview-code">{children?.[0]}</div>
diff --git a/packages/plugin-preview/static/global-components/ContainerFixedPerComp.tsx b/packages/plugin-preview/static/global-components/ContainerFixedPerComp.tsx
index fe52c9025..ecd151132 100644
--- a/packages/plugin-preview/static/global-components/ContainerFixedPerComp.tsx
+++ b/packages/plugin-preview/static/global-components/ContainerFixedPerComp.tsx
@@ -60,7 +60,7 @@ const ContainerFixedPerComp = (props: ContainerProps) => {
         <MobileContainerFixedPerComp {...props} />
       ) : (
         <NoSSR>
-          <div className="rspress-preview">
+          <div className="rspress-preview rp-not-doc">
             <div>
               <div className="rspress-preview-card">
                 <div
diff --git a/packages/theme-default/src/styles/base.css b/packages/theme-default/src/styles/base.css
index 62c5e49ae..f9d8ee63c 100644
--- a/packages/theme-default/src/styles/base.css
+++ b/packages/theme-default/src/styles/base.css
@@ -122,30 +122,3 @@ p {
     'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --rp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
-
-/* #region keep the html syntax in markdown original style e.g: <ul></ul> */
-/* why ":where"? For css priority, to be easy to overrides by className */
-.rspress-doc :where(ul) {
-  list-style: disc;
-
-  padding-left: 1.25rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  line-height: 1.75rem;
-}
-.rspress-doc :where(ol) {
-  list-style: decimal;
-
-  padding-left: 1.25rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  line-height: 1.75rem;
-}
-
-.rspress-doc :where(ul) :where(li):not(:first-child) {
-  margin-top: 0.5rem;
-}
-.rspress-doc :where(url) :where(li):not(:first-child) {
-  margin-top: 0.5rem;
-}
-/* #endregion */
diff --git a/packages/theme-default/src/styles/doc.scss b/packages/theme-default/src/styles/doc.scss
new file mode 100644
index 000000000..610fbe70e
--- /dev/null
+++ b/packages/theme-default/src/styles/doc.scss
@@ -0,0 +1,106 @@
+/* keep the html syntax in markdown original style e.g: <ul></ul> */
+.rspress-doc {
+  :not(:where(.rp-not-doc *)) {
+    // escape hatch like <div className="rp-not-doc"></div>
+    /* why ":where"? For css priority, <<equal to className priority>>, to be easy to overrides by className */
+    /* list */
+    /* #region */
+    &:where(ul) {
+      list-style: disc;
+      padding-left: 1.25rem;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      line-height: 1.75rem;
+    }
+
+    &:where(ol) {
+      list-style: decimal;
+      padding-left: 1.25rem;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      line-height: 1.75rem;
+    }
+
+    &:where(ul li):not(:first-child) {
+      margin-top: 0.5rem;
+    }
+
+    &:where(ol li):not(:first-child) {
+      margin-top: 0.5rem;
+    }
+    /* #endregion */
+
+    /* table */
+    /* #regison */
+    &:where(table) {
+      display: block;
+      border-collapse: collapse;
+      font-size: 1rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+      overflow-x: auto;
+      line-height: 1.75rem;
+      border: 1px solid var(--rp-c-border);
+    }
+
+    &:where(table tr) {
+      border: 1px solid;
+      border-style: solid;
+      transition-property: color, background-color, border-color;
+      transition-duration: 500ms;
+      border-color: var(--rp-c-gray-light-3);
+    }
+
+    &:where(table tr):nth-child(even) {
+      background-color: var(--rp-c-bg-soft);
+    }
+
+    &:where(table td) {
+      border: 1px solid;
+      border-style: solid;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-color: var(--rp-c-gray-light-3);
+    }
+
+    &:where(table th) {
+      border: 1px solid;
+      border-style: solid;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      color: var(--rp-c-text-1);
+      font-size: 1rem;
+      font-weight: 600;
+      border-color: var(--rp-c-gray-light-3);
+    }
+  }
+
+  /* #endregison */
+}
+
+/* Dark mode styles */
+:where(.dark) .rspress-doc {
+  :not(:where(.rp-not-doc *)) {
+    /* table */
+    /* #regison */
+    &:where(table) {
+      border-color: var(--rp-c-divider);
+    }
+
+    &:where(table tr) {
+      border-color: var(--rp-c-divider);
+    }
+
+    &:where(table td) {
+      border-color: var(--rp-c-divider);
+    }
+
+    &:where(table th) {
+      border-color: var(--rp-c-divider);
+    }
+  }
+}
diff --git a/packages/theme-default/src/styles/index.ts b/packages/theme-default/src/styles/index.ts
index 851c063da..062744cc5 100644
--- a/packages/theme-default/src/styles/index.ts
+++ b/packages/theme-default/src/styles/index.ts
@@ -3,5 +3,6 @@
  */
 import './vars.css';
 import './base.css';
+import './doc.scss';
 import './code.css';
 import './scrollbar.scss';