diff --git a/devui/table/src/header/header.scss b/devui/table/src/header/header.scss
index fc10e53a3a4df436dd0dd4eca4c040f1e53e354b..21e88bf495006c749a79c1782c1d840f70b134b0 100644
--- a/devui/table/src/header/header.scss
+++ b/devui/table/src/header/header.scss
@@ -16,3 +16,11 @@
     }
   }
 }
+
+.header-bg {
+  thead.devui-thead {
+    tr {
+      background: var(--devui-list-item-hover-bg, #f2f5fc);
+    }
+  }
+}
diff --git a/devui/table/src/table.scss b/devui/table/src/table.scss
index e272211ac567e1865e81f6fcc1eae8cd3b61ba46..48d9e7cf3180dea7646f67175ebe7ba3268b574f 100644
--- a/devui/table/src/table.scss
+++ b/devui/table/src/table.scss
@@ -24,3 +24,7 @@
     text-align: center;
   }
 }
+
+.table-layout-auto {
+  table-layout: auto;
+}
diff --git a/devui/table/src/table.type.ts b/devui/table/src/table.type.ts
index 563b9bb6a9cb2a2dfbf67c0a9e4b5c04754488bb..b9132f45ec9a57251db60d09b475cab66b56bf1c 100644
--- a/devui/table/src/table.type.ts
+++ b/devui/table/src/table.type.ts
@@ -9,6 +9,14 @@ export const TableProps = {
     type: Boolean,
     default: false,
   },
+  headerBg:{
+    type: Boolean,
+    default: false
+  },
+  tableLayout:{
+    type: String as PropType<'fixed' | 'auto'>,
+    default: 'fixed'
+  }
 };
 
 export type TablePropsTypes = ExtractPropTypes<typeof TableProps>;
diff --git a/devui/table/src/use-table.ts b/devui/table/src/use-table.ts
index c5e9f1e65d0bd212f4b92ab8de7ab32a374173f0..e375cbbb4ca06fb68921d87c421407cb381883f2 100644
--- a/devui/table/src/use-table.ts
+++ b/devui/table/src/use-table.ts
@@ -5,6 +5,8 @@ export function useTable(props: TablePropsTypes): any {
   const classes = computed(() => ({
     'devui-table': true,
     'devui-table-striped': props.striped,
+    'header-bg': props.headerBg,
+    'table-layout-auto': props.tableLayout === 'auto'
   }));
 
   return { classes };
diff --git a/docs/.vitepress/devui-theme/styles/layout.scss b/docs/.vitepress/devui-theme/styles/layout.scss
index 8f0ef7a58e631aea3bf8bca270f8aa2745a379d9..2c5b027aafb22ee82e0756b463c84dc2b87bfea2 100644
--- a/docs/.vitepress/devui-theme/styles/layout.scss
+++ b/docs/.vitepress/devui-theme/styles/layout.scss
@@ -183,10 +183,6 @@ tr {
   border-top: 1px solid $devui-dividing-line;
 }
 
-tr:nth-child(2n) {
-  background-color: $devui-area;
-}
-
 th,
 td {
   border: 1px solid $devui-dividing-line;
diff --git a/docs/components/table/index.md b/docs/components/table/index.md
index 9492d1cf1225363aecf18b10eb025f73348ae088..fb305b27c2e127afe91f737d63027c7a10b902aa 100644
--- a/docs/components/table/index.md
+++ b/docs/components/table/index.md
@@ -62,13 +62,27 @@
 
 :::
 
-### 斑马纹表格
+### 表格样式
 
-:::demo 通过`d-table`组件上的`striped`属性，可设置带斑马纹的表格，更容易区分不同行的数据。
+:::demo
 
 ```vue
 <template>
-  <d-table striped :data="stripedTableData">
+<div class="table-btn-groups">
+      <div class="table-btn">
+          自动表格布局：
+         <d-switch v-model:checked="tableLayout" />
+      </div>
+      <div class="table-btn">
+          斑马纹：
+         <d-switch v-model:checked="striped" />
+      </div>
+      <div class="table-btn">
+          表头背景色：
+         <d-switch v-model:checked="headerBg" />
+      </div>
+  </div>
+  <d-table :table-layout="tableLayout?'auto':'fixed'" :striped="striped" :header-bg="headerBg" :data="stripedTableData">
     <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>
@@ -82,7 +96,9 @@
 
   export default defineComponent({
     setup() {
-
+      const tableLayout = ref(false)
+      const striped = ref(false)
+      const headerBg = ref(false)
       const stripedTableData = ref([
         {
           firstName: 'Mark',
@@ -110,10 +126,27 @@
         }
       ])
 
-      return { stripedTableData }
+      return { 
+        stripedTableData,
+        striped,
+        headerBg,
+        tableLayout 
+      }
     }
   })
 </script>
+
+<style lang="scss">
+.table-btn-groups{
+  display: flex;
+  margin-bottom: 1rem;
+}
+.table-btn{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+</style>
 ```
 
 :::
@@ -182,16 +215,18 @@
 
 ### d-table Props
 
-| 参数    | 类型      | 默认值  | 说明               |
-| ------- | --------- | ------- | ------------------ |
-| data    | `Array`   | `[]`     | 显示的数据         |
-| striped | `Boolean` | `false` | 是否显示斑马纹间隔 |
+| 参数         | 类型                | 默认值    | 说明                     |
+| ------------ | ------------------- | --------- | ------------------------ |
+| data         | `Array`             | `[]`      | 显示的数据               |
+| striped      | `Boolean`           | `false`   | 是否显示斑马纹间隔       |
+| header-bg    | `Boolean`           | `false`   | 可选，表头是否显示背景色 |
+| table-layout | `String` | `'fixed'` | 表格布局，可选值为`'auto'`|
 
 ### d-column Props
 
-| 参数   | 类型               | 默认值 | 说明                   |
-| ------ | ------------------ | ------ | ---------------------- |
-| header | `String`           | `-`    | 对应列的标题           |
-| field  | `String`           | `-`    | 对应列内容的字段名     |
-| width  | `String \| Number` | `-`    | 对应列的宽度，单位`px` |
-| min-width | `String \| Number` | `-` | 对应列的最小宽度，单位`px` |
+| 参数      | 类型               | 默认值 | 说明                       |
+| --------- | ------------------ | ------ | -------------------------- |
+| header    | `String`           | `-`    | 对应列的标题               |
+| field     | `String`           | `-`    | 对应列内容的字段名         |
+| width     | `String \| Number` | `-`    | 对应列的宽度，单位`px`     |
+| min-width | `String \| Number` | `-`    | 对应列的最小宽度，单位`px` |
\ No newline at end of file