diff --git a/demo/demo.vue b/demo/demo.vue
index a870a36..178f537 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="top: 20vh; width: 100%; height: 500px">
-    <x-gantt :data="ganttData">
+    <x-gantt :data="ganttData" style="padding-left: 20vh">
       <x-gantt-column label="group1">
         <x-gantt-column prop="id" width="200px"></x-gantt-column>
         <x-gantt-column label="group2">
@@ -40,7 +40,7 @@ let id = 0;
 
 const ganttData = reactive<any>([]);
 
-for (let i = 0; i < 500; i++) {
+for (let i = 0; i < 50; i++) {
   onAdd();
 }
 
diff --git a/src/components/column/index.vue b/src/components/column/index.vue
index 3673c7b..c78c9e9 100644
--- a/src/components/column/index.vue
+++ b/src/components/column/index.vue
@@ -23,7 +23,6 @@
 import Variables from '@/constants/vars';
 import columnProps from './props';
 import { defineComponent, useSlots, computed } from 'vue';
-import { getColumnWidth } from './util';
 import useStyle from '@/composables/useStyle';
 import useSlotsBox from '@/composables/useSlotsBox';
 
@@ -41,17 +40,13 @@ const { $styleBox, rowHeight } = useStyle();
 const { $slotsBox, isMerge } = useSlotsBox();
 
 const realWidth = computed(() => {
-  let curWidth = getColumnWidth(
-    props?.width ?? Variables.default.tableColumnWidth
-  );
+  let curWidth = $slotsBox.tableHeaders.leafs[props!.__index ?? 1].width;
 
   for (let i = (props.__index ?? 1) + 1; i < $slotsBox.cols.length; i++) {
     const col = $slotsBox.cols[i];
 
     if (isMerge(col.props?.merge, props.data!)) {
-      curWidth += getColumnWidth(
-        col.props?.width ?? Variables.default.tableColumnWidth
-      );
+      curWidth += $slotsBox.tableHeaders.leafs[i].width;
     } else {
       break;
     }
diff --git a/src/components/column/util.ts b/src/components/column/util.ts
deleted file mode 100644
index 19f1800..0000000
--- a/src/components/column/util.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const getColumnWidth = (width: number | string) => {
-  return typeof width === 'number' ? width : Number.parseInt(width);
-};
diff --git a/src/components/common/TableHeader.vue b/src/components/common/TableHeader.vue
index 612e53a..4280b05 100644
--- a/src/components/common/TableHeader.vue
+++ b/src/components/common/TableHeader.vue
@@ -1,22 +1,17 @@
 <template>
   <table class="xg-table-header" cellpadding="0" cellspacing="0" border="0">
     <colgroup>
-      <template v-for="(c, i) in $slotsBox.cols" :key="i">
-        <col
-          :width="
-            getColumnWidth(
-              c.props?.width ?? Variables.default.tableColumnWidth
-            ) + 'px'
-          "
-        />
+      <template v-for="(c, i) in $slotsBox.tableHeaders.leafs" :key="i">
+        <col :width="`${c.width}px`" />
       </template>
     </colgroup>
     <thead>
       <tr v-for="(r, trIndex) in $slotsBox.tableHeaders.headers" :key="trIndex">
         <th
           v-for="(c, i) in r"
+          ref="headerRef"
           :key="i"
-          class="xg-table-header-cell"
+          :class="['xg-table-header-cell', 'cell-resizable']"
           :style="{ ...$styleBox.getBorderColor() }"
           :colspan="c.colSpan"
           :rowspan="c.rowSpan"
@@ -31,11 +26,19 @@
 <script lang="ts" setup>
 import useSlotsBox from '@/composables/useSlotsBox';
 import useStyle from '@/composables/useStyle';
-import Variables from '@/constants/vars';
-import { getColumnWidth } from '../column/util';
+import { onMounted, ref } from 'vue';
 const { $slotsBox } = useSlotsBox();
 
 const { $styleBox } = useStyle();
+
+const headerRef = ref<HTMLElement[]>([]);
+onMounted(() => {
+  headerRef.value.forEach(item => {
+    item.addEventListener('pointerdown', e => {
+      console.log(e);
+    });
+  });
+});
 </script>
 
 <style lang="scss" scoped>
@@ -61,5 +64,20 @@ const { $styleBox } = useStyle();
     border-right: 1px solid;
     padding: 0 20px;
   }
+
+  .xg-table-header-cell.cell-resizable {
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: -5px;
+      top: 0;
+      bottom: 0;
+      width: 10px;
+      cursor: col-resize;
+      pointer-events: auto;
+    }
+  }
 }
 </style>
diff --git a/src/components/root/index.vue b/src/components/root/index.vue
index 349dfab..45984d1 100644
--- a/src/components/root/index.vue
+++ b/src/components/root/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="rootRef"
     class="xg-root"
     :style="{ ...$styleBox.getBorder(), ...$styleBox.getBorderColor() }"
   >
@@ -7,7 +8,7 @@
     <sync-scroll-container
       ref="tableRef"
       vertical
-      class="table-container"
+      class="xg-table-container"
       :style="{ width: tableWidth + 'px' }"
       hide-scroll
       disable-horizontal
@@ -20,14 +21,25 @@
       <TableBody :gap="scrollGapSize" />
     </sync-scroll-container>
 
-    <div class="mid-separate-line" />
+    <!-- 中分线 -->
+    <div
+      ref="midLineRef"
+      class="xg-mid-separate-line"
+      @pointerdown="onDownMidLine"
+    />
+    <!-- 移动示意线 -->
+    <div
+      v-show="showLine"
+      class="xg-move-line"
+      :style="{ left: lineLeft + 'px' }"
+    />
 
     <!-- 右侧甘特 -->
     <sync-scroll-container
       ref="ganttRef"
       vertical
       horizontal
-      class="gantt-container"
+      class="xg-gantt-container"
       :group="containerId"
       :style="{ width: `calc(100% - ${tableWidth}px - 3px)` }"
     >
@@ -49,20 +61,33 @@ import GanttBody from '@/components/common/GanttBody.vue';
 import useSlotsBox from '@/composables/useSlotsBox';
 import useTableWidth from '@/composables/useTableWidth';
 import { uuid } from '@/utils/common';
-import { getCurrentInstance, onMounted, onUpdated, ref, toRefs } from 'vue';
+import {
+  DefineComponent,
+  getCurrentInstance,
+  onMounted,
+  onUpdated,
+  ref,
+  toRefs
+} from 'vue';
 import rootProps from './rootProps';
 import useData from '@/composables/useData';
 import useStyle from '@/composables/useStyle';
 import { useResizeObserver } from '@vueuse/core';
 import useParam from '@/composables/useParam';
 import useGanttHeader from '@/composables/useGanttHeader';
+import useDrag from '@/composables/useDrag';
+import useElement from '@/composables/useElement';
 
 const containerId = uuid(10);
 const props = defineProps(rootProps);
 
+// #region 挂载实例
+const { rootRef } = useElement();
+// #endregion
+
 // #region 获取表格下方的滚动条 gap
-const tableRef = ref<any>(null);
-const ganttRef = ref<any>(null);
+const tableRef = ref<DefineComponent | null>(null);
+const ganttRef = ref<DefineComponent | null>(null);
 const scrollGapSize = ref(0);
 
 function getScrollGapSize() {
@@ -83,8 +108,8 @@ onUpdated(getScrollGapSize);
 const { $param } = useParam();
 onMounted(() => {
   $param.rootHeight = Math.max(
-    ganttRef.value.$el.offsetHeight,
-    ganttRef.value.$el.clientHeight
+    ganttRef.value!.$el.offsetHeight,
+    ganttRef.value!.$el.clientHeight
   );
 });
 // #endregion
@@ -95,7 +120,7 @@ setStyles(props);
 // #endregion
 
 // #region 处理插槽内容
-const { setSlots } = useSlotsBox();
+const { setSlots, $slotsBox } = useSlotsBox();
 
 setSlots(props.slots);
 // #endregion
@@ -116,6 +141,46 @@ const { setGanttHeaders } = useGanttHeader();
 onMounted(() => useResizeObserver(ganttRef.value?.$el, setGanttHeaders));
 // #endregion
 
+// #region 加载示意线
+const { showLine, onDrag, lineLeft } = useDrag();
+
+function onDownMidLine(e: PointerEvent) {
+  const rootRect = rootRef.value?.getBoundingClientRect();
+  lineLeft.value = e.clientX - (rootRect?.left ?? 0);
+  $param.showMoveLine = true;
+}
+
+const midLineRef = ref<HTMLElement | null>(null);
+onMounted(() => {
+  onDrag(midLineRef, {
+    reset: true,
+
+    onMove: (x, e) => {
+      const tableRect = tableRef.value?.$el.getBoundingClientRect();
+      const ganttRect = ganttRef.value?.$el.getBoundingClientRect();
+
+      if (e.clientX < tableRect.left) {
+        return;
+      }
+
+      if (e.clientX > ganttRect.right - 100) {
+        return;
+      }
+
+      lineLeft.value = e.clientX;
+    },
+
+    onEnd: x => {
+      $param.showMoveLine = false;
+
+      $slotsBox.tableHeaders.leafs[
+        $slotsBox.tableHeaders.leafs.length - 1
+      ].width += x;
+    }
+  });
+});
+// #endregion
+
 console.log('.....root', getCurrentInstance());
 </script>
 
@@ -123,24 +188,42 @@ console.log('.....root', getCurrentInstance());
 .xg-root {
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
   width: 100%;
   height: 100%;
 }
 
-.table-container {
+.xg-table-container {
   height: 100%;
   display: inline-block;
   position: relative;
 }
 
-.mid-separate-line {
+.xg-mid-separate-line {
   width: 3px;
   height: 100%;
   display: inline-block;
-  background-color: black;
+  position: relative;
+  background-color: #e5e5e5;
+  transition: background-color 0.1s;
+
+  &:hover {
+    background-color: #d5d5d5;
+    box-shadow: 0 0 10px #d5d5d5;
+    cursor: col-resize;
+  }
+}
+
+.xg-move-line {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0px;
+  z-index: 100;
+  border-left: 1px dashed #d5d5d5;
 }
 
-.gantt-container {
+.xg-gantt-container {
   height: 100%;
   display: inline-block;
 }
diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
index 9b461f9..1a4e39d 100644
--- a/src/components/slider/index.vue
+++ b/src/components/slider/index.vue
@@ -14,10 +14,10 @@
 import { defineComponent, useSlots, ref, computed } from 'vue';
 import Variables from '@/constants/vars';
 import sliderProps from './props';
-import { useDraggable } from '@vueuse/core';
 import useData from '@/composables/useData';
 import useGanttHeader from '@/composables/useGanttHeader';
 import useGanttWidth from '@/composables/useGanttWidth';
+import useDrag from '@/composables/useDrag';
 
 export default defineComponent({
   name: Variables.name.slider
@@ -27,56 +27,55 @@ export default defineComponent({
 <script setup lang="ts">
 const props = defineProps(sliderProps);
 const slots = useSlots();
-
-// left 取决于 data 的 start 日期值
-
-// 滑块的初始偏移量
 const { $data } = useData();
 const { ganttHeader } = useGanttHeader();
 const { ganttColumnWidth } = useGanttWidth();
+
+const currentMillisecond = computed(
+  () => Variables.time.millisecondOf[ganttHeader.unit]
+);
+
 const sliderLeft = computed(
   () =>
-    ((props.data?.start.intervalTo($data.start) ?? 0) /
-      Variables.time.millisecondOf[ganttHeader.unit]) *
+    (props.data!.start.intervalTo($data.start) / currentMillisecond.value) *
     ganttColumnWidth.value
 );
 
 const sliderWidth = computed(
   () =>
-    (props.data!.start.intervalTo(props.data?.end) /
-      Variables.time.millisecondOf[ganttHeader.unit]) *
+    (props.data!.start.intervalTo(props.data?.end) / currentMillisecond.value) *
     ganttColumnWidth.value
 );
 
-const left = ref(0);
-const sliderRef = ref<HTMLElement | null>(null);
-const delta = ref(0);
-const startDate = props.data?.start.clone();
-const endDate = props.data?.end.clone();
-useDraggable(sliderRef, {
-  onStart: (pos, e) => {
-    const rect = sliderRef.value!.getBoundingClientRect();
-    delta.value = Math.abs(left.value - rect.left) + e.offsetX;
-  },
-
-  onMove: (pos, e) => {
-    left.value = e.clientX - delta.value;
-
+const setStart = (() => {
+  const startDate = props.data?.start.clone();
+  return (x: number) => {
     props.data?.setStart(
       startDate!.getOffset(
-        (left.value / ganttColumnWidth.value) *
-          Variables.time.millisecondOf[ganttHeader.unit]
+        (x / ganttColumnWidth.value) * currentMillisecond.value
       ),
       ganttHeader.unit
     );
+  };
+})();
 
+const setEnd = (() => {
+  const endDate = props.data?.end.clone();
+  return (x: number) =>
     props.data?.setEnd(
       endDate!.getOffset(
-        (left.value / ganttColumnWidth.value) *
-          Variables.time.millisecondOf[ganttHeader.unit]
+        (x / ganttColumnWidth.value) * currentMillisecond.value
       ),
       ganttHeader.unit
     );
+})();
+
+const sliderRef = ref<HTMLElement | null>(null);
+const { onDrag } = useDrag();
+onDrag(sliderRef, {
+  onMove: x => {
+    setStart(x);
+    setEnd(x);
   }
 });
 </script>
@@ -95,10 +94,6 @@ useDraggable(sliderRef, {
 }
 
 .xg-slider.xg-slider-drag {
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
+  cursor: ew-resize;
 }
 </style>
diff --git a/src/composables/useDrag.ts b/src/composables/useDrag.ts
new file mode 100644
index 0000000..34e3b4a
--- /dev/null
+++ b/src/composables/useDrag.ts
@@ -0,0 +1,57 @@
+import { useDraggable } from '@vueuse/core';
+import { type Ref, ref, computed } from 'vue';
+import useParam from './useParam';
+
+const lineLeft = ref(0);
+
+interface DragOptions {
+  onMove?: (x: number, e: MouseEvent) => void;
+  onEnd?: (x: number, e: MouseEvent) => void;
+  target?: El;
+  reset?: boolean;
+}
+
+type El = HTMLElement | SVGElement | null | undefined;
+
+export default () => {
+  function onDrag(el: Ref<El>, options: DragOptions = {}) {
+    const left = ref(0);
+    const delta = ref(0);
+
+    const isMove = ref(false);
+
+    useDraggable(el, {
+      onStart: (pos, e) => {
+        isMove.value = false;
+
+        if (options.reset) {
+          left.value = 0;
+          delta.value = 0;
+        }
+
+        const rect = (options?.target ?? el.value)?.getBoundingClientRect();
+        delta.value = Math.abs(left.value - (rect?.left ?? 0)) + e.offsetX;
+      },
+
+      onMove: (pos, e) => {
+        isMove.value = true;
+
+        left.value = e.clientX - delta.value;
+        options?.onMove?.(left.value, e);
+      },
+
+      onEnd: (pos, e) => {
+        if (isMove.value) options?.onEnd?.(left.value, e);
+      }
+    });
+  }
+
+  const { $param } = useParam();
+  const showLine = computed(() => $param.showMoveLine);
+
+  return {
+    onDrag,
+    showLine,
+    lineLeft
+  };
+};
diff --git a/src/composables/useElement.ts b/src/composables/useElement.ts
new file mode 100644
index 0000000..7348752
--- /dev/null
+++ b/src/composables/useElement.ts
@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+
+const rootRef = ref<HTMLElement | null>(null);
+
+export default () => {
+  return { rootRef };
+};
diff --git a/src/composables/useSlotsBox.ts b/src/composables/useSlotsBox.ts
index 510270c..0195fc9 100644
--- a/src/composables/useSlotsBox.ts
+++ b/src/composables/useSlotsBox.ts
@@ -2,18 +2,12 @@ import type RowItem from '@/models/data/row';
 import { useStore } from '@/store';
 import { type Slots } from 'vue';
 import useData from './useData';
-import useTableWidth from './useTableWidth';
 
 export default () => {
   const store = useStore();
 
-  const { setTableWidth } = useTableWidth();
-
   function setSlots(slots: Slots) {
     store.$slotsBox.setSlots(slots);
-
-    // 设置宽度
-    setTableWidth(store.$slotsBox.cols);
   }
 
   const { toRowData } = useData();
diff --git a/src/composables/useTableWidth.ts b/src/composables/useTableWidth.ts
index 1ecae79..0eee132 100644
--- a/src/composables/useTableWidth.ts
+++ b/src/composables/useTableWidth.ts
@@ -1,18 +1,15 @@
-import Variables from '@/constants/vars';
 import { useStore } from '@/store';
-import { type VNode } from 'vue';
+import { computed } from 'vue';
 
 export default () => {
   const store = useStore();
 
-  function setTableWidth(columns: VNode[]) {
-    store.tableWidth.value = columns.reduce(
-      (p, c) =>
-        p +
-        (Number.parseInt(c.props?.width) || Variables.default.tableColumnWidth),
+  const tableWidth = computed(() => {
+    return store.$slotsBox.cols.reduce(
+      (p, c) => p + store.$slotsBox.tableHeaders.leafs[c.props!.__index].width,
       0
     );
-  }
+  });
 
-  return { tableWidth: store.tableWidth, setTableWidth };
+  return { tableWidth };
 };
diff --git a/src/models/param/header.ts b/src/models/param/header.ts
index 8b39dc4..33a15ff 100644
--- a/src/models/param/header.ts
+++ b/src/models/param/header.ts
@@ -27,6 +27,7 @@ class TableColumn extends Column {
   label: string;
   declare children?: TableColumn[];
   parent?: TableColumn;
+  width: number = Variables.default.tableColumnWidth;
 
   /**
    *
diff --git a/src/models/param/param.ts b/src/models/param/param.ts
index 5ef43b7..490f9ea 100644
--- a/src/models/param/param.ts
+++ b/src/models/param/param.ts
@@ -34,4 +34,13 @@ export default class Param {
   public set selectId(v: string) {
     this._selectId = v;
   }
+
+  private _showMoveLine: boolean = false;
+  public get showMoveLine(): boolean {
+    return this._showMoveLine;
+  }
+
+  public set showMoveLine(v: boolean) {
+    this._showMoveLine = v;
+  }
 }
diff --git a/src/models/param/slotsBox.ts b/src/models/param/slotsBox.ts
index 089ae07..68cf9fc 100644
--- a/src/models/param/slotsBox.ts
+++ b/src/models/param/slotsBox.ts
@@ -58,7 +58,11 @@ export default class SlotsBox {
    */
   private setLeafCols() {
     this.cols = this.tableHeaders.leafs.map((v, i) => {
+      const w = v.node.props?.width ?? Variables.default.tableColumnWidth;
+      v.width = typeof w === 'number' ? w : Number.parseInt(w);
+
       v.node.props = Object.assign({}, v.node.props, { __index: i });
+
       return v.node;
     });
   }
diff --git a/src/store/index.ts b/src/store/index.ts
index a305327..627c0cc 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -6,7 +6,7 @@
  * @Description: 头部注释
  */
 
-import { inject, provide, reactive, type Ref, ref } from 'vue';
+import { inject, provide, reactive } from 'vue';
 import EventBus from '@/utils/bus';
 import { AllData } from '@/models/data';
 import { GanttHeader, Param, SlotsBox, StyleBox } from '@/models/param';
@@ -15,9 +15,6 @@ export const initStore = () => {
   const Bus = reactive(new EventBus());
   provide('$bus', Bus);
 
-  const tableWidth = ref(0);
-  provide('TABLE_WIDTH', tableWidth);
-
   const slotsBox = reactive(new SlotsBox());
   provide('$slotsBox', slotsBox);
 
@@ -41,11 +38,6 @@ export const useStore = () => {
      */
     $bus: inject('$bus') as EventBus,
 
-    /**
-     * table 宽度
-     */
-    tableWidth: inject('TABLE_WIDTH') as Ref<number>,
-
     /**
      * 插槽盒子，所有插槽都保存在这里
      */