diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index ed6c6212f..806aabd56 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -1,6 +1,9 @@
 .protyle-wysiwyg {
   padding: 34px 16px 16px 24px;
   cursor: text;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
 
   box-sizing: border-box;
 
@@ -14,6 +17,7 @@
 
   [data-node-id] {
     position: relative;
+    width: 100%;
 
     &[custom-riff-decks] {
       box-shadow: -3px 0px 0px -1px var(--b3-protyle-inline-mark-background) inset;
@@ -29,9 +33,9 @@
     }
 
     &.av {
-      min-height: 100px;
-      border: 1px solid var(--b3-border-color);
-      border-radius: 4px;
+      .av__scroll {
+        overflow: auto hidden;
+      }
     }
 
     &.hr {
diff --git a/app/src/protyle/render/av/index.ts b/app/src/protyle/render/av/index.ts
index ef497f146..1b7484cdf 100644
--- a/app/src/protyle/render/av/index.ts
+++ b/app/src/protyle/render/av/index.ts
@@ -1,4 +1,3 @@
-
 export const avRender = (element: Element) => {
     let avElements: Element[] = [];
     if (element.getAttribute("data-type") === "NodeAttributeView") {
@@ -16,23 +15,77 @@ export const avRender = (element: Element) => {
                 return;
             }
             const data = {
-                filter:{},
+                title: "table",
+                filter: {},
                 sorts: {},
-                columns:[{
-                    width: "",
-                    icon:"",
-                    id:"",
-                    name:"",
-                    wrap:"",
-                    type:"",
+                columns: [{
+                    width: 500,
+                    icon: "",
+                    id: "",
+                    name: "columnA",
+                    wrap: false,
+                    type: "",
+                }, {
+                    width: 500,
+                    icon: "",
+                    id: "",
+                    name: "columnB",
+                    wrap: false,
+                    type: "",
                 }],
-                rows:[{
-                    id:"",
-                    cells:[{
-                        value:"",
+                rows: [{
+                    id: "",
+                    cells: [{
+                        value: "a",
+                    }, {
+                        color: "var(--b3-card-error-color)",
+                        bgColor: "var(--b3-card-error-background)",
+                        value: "a1",
+                    }]
+                }, {
+                    id: "",
+                    cells: [{
+                        color: "var(--b3-card-success-color)",
+                        bgColor: "var(--b3-card-success-background)",
+                        value: "b",
+                    }, {
+                        value: "b1",
                     }]
                 }]
             };
+            let tableHTML = "<div class='fn__flex'>";
+            data.columns.forEach((column) => {
+                tableHTML += `<div style="flex-shrink: 0;width: ${column.width}px;">${column.name}</div>`
+            });
+            tableHTML += "</div>";
+            data.rows.forEach((row) => {
+                tableHTML += "<div class='fn__flex'>";
+                row.cells.forEach((cell, index) => {
+                    tableHTML += `<div style="flex-shrink: 0;width: ${data.columns[index].width}px;background-color: ${cell.bgColor};color: ${cell.color}">${cell.value}</div>`
+                });
+                tableHTML += "</div>";
+            });
+            const paddingLeft = e.parentElement.style.paddingLeft;
+            const paddingRight = e.parentElement.style.paddingRight;
+            // 10: ::-webkit-scrollbar width
+            e.style.width = (e.parentElement.clientWidth - 10) + "px";
+            e.style.alignSelf = "center";
+            e.firstElementChild.outerHTML = `<div>
+    <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight}">
+        <div>
+            <div>tab1</div>
+        </div>
+        <div contenteditable="true">
+            ${data.title}
+        </div>
+    </div>
+    <div class="av__scroll">
+        <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};min-width: 100%;float: left;">
+            ${tableHTML}
+            <div>add</div>
+        </div>
+    </div>
+</div>`;
             e.setAttribute("data-render", "true");
         });
     }