diff --git a/packages/devui-vue/devui/table/src/body/body.tsx b/packages/devui-vue/devui/table/src/body/body.tsx
index 9b02b8679897d1deb3d3347c868d72b6e5ad4934..4937430573e2dea6378c980686adfed9febc4805 100644
--- a/packages/devui-vue/devui/table/src/body/body.tsx
+++ b/packages/devui-vue/devui/table/src/body/body.tsx
@@ -9,14 +9,9 @@ export default defineComponent({
   setup(props: TableBodyPropsTypes) {
     const { rowColumns } = useTableBody(props);
 
-    return { rowColumns };
-  },
-  render() {
-    const { rowColumns } = this;
-
-    return (
-      <tbody class="devui-tbody">
-        {rowColumns.map((row, rowIndex) => {
+    return () => {
+      return <tbody class="devui-tbody">
+        {rowColumns.value.map((row, rowIndex) => {
           return (
             <tr key={rowIndex}>
               {row.columns.map((column, index) => {
@@ -28,6 +23,6 @@ export default defineComponent({
           );
         })}
       </tbody>
-    );
-  },
+    }
+  }
 });
\ No newline at end of file
diff --git a/packages/devui-vue/devui/table/src/colgroup/colgroup.tsx b/packages/devui-vue/devui/table/src/colgroup/colgroup.tsx
index 93e7197d8466045978538007fbb68379a8a8992b..1a9e123fa35dff49b06fdb8343b50b169835b9d9 100644
--- a/packages/devui-vue/devui/table/src/colgroup/colgroup.tsx
+++ b/packages/devui-vue/devui/table/src/colgroup/colgroup.tsx
@@ -8,16 +8,12 @@ export default defineComponent({
     const parent: Table = inject('table');
     const columns: Column[] = parent.store.states._columns;
 
-    return { columns };
-  },
-  render() {
-    const { columns } = this;
-    return (
-      <colgroup>
-        {columns.map((column, index) => {
-          return <col key={index} width={column.realWidth}></col>;
-        })}
-      </colgroup>
-    );
-  },
+    return () => {
+      return <colgroup>
+      {columns._value.map((column, index) => {
+        return <col key={index} width={column.realWidth}></col>;
+      })}
+    </colgroup>
+    }
+  }
 });
\ No newline at end of file
diff --git a/packages/devui-vue/devui/table/src/column/column.tsx b/packages/devui-vue/devui/table/src/column/column.tsx
index 60ef5e04cf8e85ae459d43673fd1ce60219978ab..e6dec6f966298d26f05303de36fd3937037b7751 100644
--- a/packages/devui-vue/devui/table/src/column/column.tsx
+++ b/packages/devui-vue/devui/table/src/column/column.tsx
@@ -26,8 +26,9 @@ export default defineComponent({
     onMounted(() => {
       parent.store.insertColumn(column);
     });
-  },
-  render() {
-    return null;
-  },
+
+    return () => {
+      return null
+    }
+  }
 });
\ No newline at end of file
diff --git a/packages/devui-vue/devui/table/src/header/header.scss b/packages/devui-vue/devui/table/src/header/header.scss
index 21e88bf495006c749a79c1782c1d840f70b134b0..3a8af9c9933e08ba561fd5121aca681e333c2d2e 100644
--- a/packages/devui-vue/devui/table/src/header/header.scss
+++ b/packages/devui-vue/devui/table/src/header/header.scss
@@ -20,7 +20,7 @@
 .header-bg {
   thead.devui-thead {
     tr {
-      background: var(--devui-list-item-hover-bg, #f2f5fc);
+      background: $devui-list-item-hover-bg;
     }
   }
 }
diff --git a/packages/devui-vue/devui/table/src/header/header.tsx b/packages/devui-vue/devui/table/src/header/header.tsx
index a05a80b7ae6f8189134368ea1d71f4a2cb582f9f..73288079faf6e38544b4609b86bce12577206070 100644
--- a/packages/devui-vue/devui/table/src/header/header.tsx
+++ b/packages/devui-vue/devui/table/src/header/header.tsx
@@ -9,20 +9,14 @@ export default defineComponent({
     const { store } = toRefs(props)
     const columns = store.value.states._columns.value;
 
-    return {
-      columns,
+    return () => {
+      return <thead class="devui-thead">
+      <tr>
+        {columns.map((column, index) => {
+          return <th key={index}>{column.renderHeader()}</th>;
+        })}
+      </tr>
+    </thead>
     }
-  },
-  render() {
-    const { columns } = this
-    return (
-      <thead class="devui-thead">
-        <tr>
-          {columns.map((column, index) => {
-            return <th key={index}>{column.renderHeader()}</th>;
-          })}
-        </tr>
-      </thead>
-    )
   }
 });
\ No newline at end of file
diff --git a/packages/devui-vue/devui/table/src/table.scss b/packages/devui-vue/devui/table/src/table.scss
index 48d9e7cf3180dea7646f67175ebe7ba3268b574f..57077b0c313402757a7654569954a2ac427c410f 100644
--- a/packages/devui-vue/devui/table/src/table.scss
+++ b/packages/devui-vue/devui/table/src/table.scss
@@ -7,24 +7,29 @@
   border-spacing: 0;
   border: none;
 
-  &-wrapper {
+  &_wrapper {
     width: 100%;
     overflow-x: auto;
   }
 
-  &-striped {
+  &_striped {
     tbody tr:nth-child(even) {
       background-color: $devui-list-item-strip-bg;
     }
   }
 
-  &-empty {
+  &_empty {
     width: 100%;
     font-size: $devui-font-size;
     text-align: center;
   }
-}
 
-.table-layout-auto {
-  table-layout: auto;
+  &_layout-auto {
+    table-layout: auto;
+  }
+
+  &_bordered {
+    border: 1px solid $devui-line;
+  }
 }
+
diff --git a/packages/devui-vue/devui/table/src/table.tsx b/packages/devui-vue/devui/table/src/table.tsx
index 83146778b7d6595233b33ac52a0b792113a2ab9f..d5753a50d65695add35aac7273e89ca761ba11e0 100644
--- a/packages/devui-vue/devui/table/src/table.tsx
+++ b/packages/devui-vue/devui/table/src/table.tsx
@@ -10,27 +10,55 @@ import './table.scss';
 export default defineComponent({
   name: 'DTable',
   props: TableProps,
-  setup(props: TablePropsTypes) {
+  setup(props: TablePropsTypes, ctx) {
+    const { slots } = ctx;
     const table = getCurrentInstance() as Table;
     const store = createStore(props);
     table.store = store;
     const { classes } = useTable(props);
     provide('table', table);
 
-    return { classes, store };
-  },
-  render() {
-    const { classes, data, store, $slots } = this;
-    return (
-      <div class="devui-table-wrapper">
-        {$slots.default()}
-        <table class={classes} cellpadding="0" cellspacing="0">
-          <ColGroup />
-          <TableHeader store={store} />
-          {!!data.length && <TableBody store={store} />}
-        </table>
-        {!data.length && <div class="devui-table-empty">No Data</div>}
+    function getScrollable(scrollable) {
+      if (!scrollable) {
+        return 'overflow: hidden;'
+      }
+    }
+    function getBodyStyle(maxHeight,isHeaderFixed) {
+      let res = '';
+
+      (function getMaxHeight() {
+        if (typeof maxHeight === 'number') {
+          res += `max-height: ${maxHeight}px;`
+        } else {
+          res += `max-height: ${maxHeight};`
+        }
+      })();
+      (function setHeaderFixed(){
+        if (isHeaderFixed) {
+          res += 'overflow-y: scroll;'
+        }
+      })();
+
+      return res
+    }
+
+    return () => {
+      return <div class="devui-table-wrapper" style={getScrollable(props.scrollable)}>
+        {slots.default?.()}
+        <div class="devui-table-header">
+          <table class={classes.value} cellpadding="0" cellspacing="0">
+            <ColGroup />
+            <TableHeader store={store} />
+          </table>
+        </div>
+        <div class="devui-table-body" style={getBodyStyle(props.maxHeight,props.fixHeader)}>
+          <table class={classes.value} cellpadding="0" cellspacing="0">
+            <ColGroup />
+            {!!props.data.length && <TableBody store={store} />}
+          </table>
+          {!props.data.length && <div class="devui-table_empty">No Data</div>}
+        </div>
       </div>
-    );
-  },
+    }
+  }
 });
diff --git a/packages/devui-vue/devui/table/src/table.type.ts b/packages/devui-vue/devui/table/src/table.type.ts
index b9132f45ec9a57251db60d09b475cab66b56bf1c..22561d614f3eeba797530d683364ef32a4c7b105 100644
--- a/packages/devui-vue/devui/table/src/table.type.ts
+++ b/packages/devui-vue/devui/table/src/table.type.ts
@@ -1,4 +1,5 @@
 import { PropType, ExtractPropTypes, ComponentInternalInstance } from 'vue';
+export type ModelValue = number | string
 
 export const TableProps = {
   data: {
@@ -13,11 +14,27 @@ export const TableProps = {
     type: Boolean,
     default: false
   },
+  borderType:{
+    type: String as PropType<'borderless' | 'bordered'>,
+    default: 'borderless'
+  },
   tableLayout:{
     type: String as PropType<'fixed' | 'auto'>,
     default: 'fixed'
+  },
+  maxHeight: {
+    type: [Number, String] as PropType<ModelValue>,
+    default: 342
+  },
+  scrollable: {
+    type: Boolean,
+    default: true
+  },
+  fixHeader: {
+    type: Boolean,
+    default: false
   }
-};
+} as const
 
 export type TablePropsTypes = ExtractPropTypes<typeof TableProps>;
 
diff --git a/packages/devui-vue/devui/table/src/use-table.ts b/packages/devui-vue/devui/table/src/use-table.ts
index e375cbbb4ca06fb68921d87c421407cb381883f2..2a4358d96ac77c151aca8a6b91cacf02d944cfbd 100644
--- a/packages/devui-vue/devui/table/src/use-table.ts
+++ b/packages/devui-vue/devui/table/src/use-table.ts
@@ -4,9 +4,10 @@ import { TablePropsTypes } from './table.type';
 export function useTable(props: TablePropsTypes): any {
   const classes = computed(() => ({
     'devui-table': true,
-    'devui-table-striped': props.striped,
+    'devui-table_striped': props.striped,
     'header-bg': props.headerBg,
-    'table-layout-auto': props.tableLayout === 'auto'
+    'devui-table_layout-auto': props.tableLayout === 'auto',
+    'devui-table_bordered': props.borderType === 'bordered'
   }));
 
   return { classes };
diff --git a/packages/devui-vue/docs/components/table/index.md b/packages/devui-vue/docs/components/table/index.md
index fb305b27c2e127afe91f737d63027c7a10b902aa..a1062fe24b4579665ddf1cc9ed40f365beebefcb 100644
--- a/packages/devui-vue/docs/components/table/index.md
+++ b/packages/devui-vue/docs/components/table/index.md
@@ -8,9 +8,9 @@
 2. 当需要对数据进行排序、过滤、自定义操作等复杂行为时。
 
 ### 基本用法
+简单表格，`d-table`组件上的`data`属性传入要展示的数据，`d-table-column`组件上通过`field`传入对应列内容的字段名，`header`传入对应列的标题。
 
-:::demo 简单表格，`d-table`组件上的`data`属性传入要展示的数据，`d-table-column`组件上通过`field`传入对应列内容的字段名，`header`传入对应列的标题。
-
+:::demo 
 ```vue
 <template>
   <d-table :data="baseTableData">
@@ -59,13 +59,11 @@
 
 </script>
 ```
-
 :::
 
 ### 表格样式
 
 :::demo
-
 ```vue
 <template>
 <div class="table-btn-groups">
@@ -73,6 +71,10 @@
           自动表格布局：
          <d-switch v-model:checked="tableLayout" />
       </div>
+      <div class="table-btn">
+          外边框：
+         <d-switch v-model:checked="borderType" />
+      </div>
       <div class="table-btn">
           斑马纹：
          <d-switch v-model:checked="striped" />
@@ -81,8 +83,12 @@
           表头背景色：
          <d-switch v-model:checked="headerBg" />
       </div>
+      <div class="table-btn">
+          固定表头：
+         <d-switch v-model:checked="fixHeader" />
+      </div>
   </div>
-  <d-table :table-layout="tableLayout?'auto':'fixed'" :striped="striped" :header-bg="headerBg" :data="stripedTableData">
+  <d-table :table-layout="tableLayout?'auto':'fixed'" :border-type="borderType?'bordered':'borderless'" :striped="striped" :header-bg="headerBg" :data="stripedTableData" :fix-header="fixHeader">
     <d-column field="firstName" header="First Name"></d-column>
     <d-column field="lastName" header="Last Name"></d-column>
     <d-column field="gender" header="Gender"></d-column>
@@ -99,6 +105,8 @@
       const tableLayout = ref(false)
       const striped = ref(false)
       const headerBg = ref(false)
+      const fixHeader = ref(false)
+      const borderType = ref(false)
       const stripedTableData = ref([
         {
           firstName: 'Mark',
@@ -119,7 +127,55 @@
           date: '1990/01/13',
         },
         {
-          firstName: 'green',
+          firstName: 'green 1',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 2',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 3',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 4',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 5',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 6',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 7',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 8',
+          lastName: 'gerong',
+          gender: 'Male',
+          date: '1990/01/14',
+        },
+        {
+          firstName: 'green 9',
           lastName: 'gerong',
           gender: 'Male',
           date: '1990/01/14',
@@ -130,7 +186,9 @@
         stripedTableData,
         striped,
         headerBg,
-        tableLayout 
+        tableLayout,
+        borderType,
+        fixHeader 
       }
     }
   })
@@ -148,13 +206,12 @@
 }
 </style>
 ```
-
 :::
 
 ### 空数据模板
+当传入的数据为空时，默认展示空数据模板。
 
-:::demo 当传入的数据为空时，默认展示空数据模板。
-
+:::demo 
 ```vue
 <template>
   <div>
@@ -200,7 +257,7 @@
             lastName: 'Yu',
             gender: 'Female',
             date: '1990/01/18',
-          }
+          },
         ]
       }
 
@@ -209,7 +266,6 @@
   })
 </script>
 ```
-
 :::
 
 
@@ -221,6 +277,9 @@
 | striped      | `Boolean`           | `false`   | 是否显示斑马纹间隔       |
 | header-bg    | `Boolean`           | `false`   | 可选，表头是否显示背景色 |
 | table-layout | `String` | `'fixed'` | 表格布局，可选值为`'auto'`|
+| border-type	 | `String` | `'borderless'` | 可选，表格边框类型，默认无外边框，`'bordered'`全边框。|
+| max-height   | `Number` | `342` | 可选，限制最大高度	|
+| fix-header   | `Boolean` | `false` | 可选，表头是否固定	|
 
 ### d-column Props