diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml
index 275854e1..e11a50aa 100644
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@@ -57,6 +57,7 @@ FluScrollablePage{
     Component{
         id:com_action
         Item{
+            height: 60
             Row{
                 anchors.centerIn: parent
                 spacing: 10
diff --git a/src/imports/FluentUI/Controls/FluTableView.qml b/src/imports/FluentUI/Controls/FluTableView.qml
index 2e53a615..98b5c8d3 100644
--- a/src/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/imports/FluentUI/Controls/FluTableView.qml
@@ -17,7 +17,7 @@ Item {
     implicitHeight: layout_table.height
     QtObject{
         id:d
-        property int columnsWidth: parent.width
+        property int columnsWidth: layout_table.headerItem.columnsWidth()
     }
     MouseArea{
         anchors.fill: parent
@@ -32,17 +32,85 @@ Item {
     onColumnsChanged: {
         model_columns.clear()
         model_columns.append(columns)
-        var w = 0
-        for(var i=0;i<model_columns.count;i++){
-            var item = model_columns.get(i)
-            w=w+item.width
-        }
-        d.columnsWidth = w
     }
     onDataSourceChanged: {
         model_data_source.clear()
         model_data_source.append(dataSource)
     }
+
+    Component{
+        id:header_columns
+        FluRectangle{
+            id:layout_columns
+            height: control.itemHeight
+            width: parent.width
+            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+            radius: [5,5,0,0]
+            function columnsWidth(){
+                var w = 0
+                for(var i=0;i<repeater_columns.count;i++){
+                    var item = repeater_columns.itemAt(i)
+                    w=w+item.width
+                }
+                return w
+            }
+            function widthByColumnIndex(index){
+                return repeater_columns.itemAt(index).width
+            }
+            Row{
+                id:list_columns
+                spacing: 0
+                anchors.fill: parent
+                Repeater{
+                    id:repeater_columns
+                    model: model_columns
+                    delegate: Item{
+                        id:item_column
+                        property point clickPos: "0,0"
+                        height: list_columns.height
+                        width: model.width
+                        FluText{
+                            id:item_column_text
+                            text:model.title
+                            wrapMode: Text.WordWrap
+                            anchors{
+                                verticalCenter: parent.verticalCenter
+                                left: parent.left
+                                leftMargin: 14
+                            }
+                            font: FluTextStyle.BodyStrong
+                        }
+                        FluDivider{
+                            id:item_divider
+                            width: 1
+                            height: 40
+                            anchors.right: parent.right
+                            anchors.verticalCenter: parent.verticalCenter
+                            visible: index !== model_columns.count-1
+                        }
+                        MouseArea{
+                            height: 40
+                            width: 6
+                            anchors.centerIn: item_divider
+                            visible: item_divider.visible
+                            cursorShape: Qt.SizeHorCursor
+                            onPressed:
+                                (mouse)=>{
+                                    clickPos = Qt.point(mouse.x, mouse.y)
+                                }
+                            preventStealing: true
+                            onPositionChanged:
+                                (mouse)=>{
+                                    var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
+                                    item_column.width = Math.max(item_column.width+delta.x,item_column_text.implicitWidth+28)
+                                }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     Flickable{
         id:layout_flickable
         height: layout_table.height
@@ -66,42 +134,7 @@ Item {
             width: Math.max(layout_flickable.width,d.columnsWidth)
             clip:true
             interactive: false
-            header: FluRectangle{
-                id:layout_columns
-                height: control.itemHeight
-                width: parent.width
-                color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-                radius: [5,5,0,0]
-                Row{
-                    id:list_columns
-                    spacing: 0
-                    anchors.fill: parent
-                    Repeater{
-                        model: model_columns
-                        delegate: Item{
-                            height: list_columns.height
-                            width: model.width
-                            FluText{
-                                text:model.title
-                                wrapMode: Text.WordWrap
-                                anchors{
-                                    verticalCenter: parent.verticalCenter
-                                    left: parent.left
-                                    leftMargin: 14
-                                }
-                                font: FluTextStyle.BodyStrong
-                            }
-                            FluDivider{
-                                width: 1
-                                height: 40
-                                anchors.right: parent.right
-                                anchors.verticalCenter: parent.verticalCenter
-                                visible: index !== model_columns.count-1
-                            }
-                        }
-                    }
-                }
-            }
+            header: header_columns
             footer: Item{
                 height: pageVisible ? 50 : 0
                 clip: true
@@ -135,7 +168,7 @@ Item {
             model:model_data_source
             delegate: Control{
                 id:item_control
-                height: table_row.maxHeight
+                height: maxHeight()
                 width: layout_table.width
                 property var model_values : getObjectValues(index)
                 property var itemObject: getObject(index)
@@ -149,42 +182,63 @@ Item {
                         return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
                     }
                 }
+                FluDivider{
+                    id:item_divider
+                    width: parent.width
+                    height: 1
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                }
+                //                Row{
+                //                    id: table_row_back
+                //                    spacing: 0
+                //                    anchors.fill: parent
+                //                    Repeater{
+                //                        model: model_values
+                //                        delegate:Rectangle{
+                //                             width: layout_table.headerItem.widthByColumnIndex(index)
+                //                             height: item_control.height
+                //                             color:"red"
+                //                        }
+                //                    }
+                //                }
                 Row{
                     id: table_row
                     spacing: 0
                     anchors.fill: parent
-                    property int maxHeight: itemHeight
                     Repeater{
+                        id:repeater_rows
                         model: model_values
-                        delegate:Item{
-                            height: table_row.maxHeight
-                            width: modelData.width
+                        delegate:FluControl{
+                            width: layout_table.headerItem.widthByColumnIndex(index)
+                            height: item_control.height
                             Loader{
+                                id:item_column_loader
                                 property var model : modelData
                                 property var dataModel : listModel
                                 property var dataObject : itemObject
-                                anchors.fill: parent
+                                anchors.verticalCenter: parent.verticalCenter
+                                width: parent.width
                                 sourceComponent: {
                                     if(model.itemData instanceof Component){
                                         return model.itemData
                                     }
                                     return com_text
                                 }
-                                onHeightChanged:
-                                {
-                                    table_row.maxHeight = Math.max(table_row.maxHeight,height,itemHeight)
-                                    parent.height = table_row.maxHeight
-                                    table_row.parent.height = table_row.maxHeight
-                                }
+                            }
+                            function columnHeight(){
+                                return item_column_loader.item.height
                             }
                         }
                     }
                 }
-                FluDivider{
-                    width: parent.width
-                    height: 1
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
+                function maxHeight(){
+                    var h = 0
+                    for(var i=0;i<repeater_rows.count;i++){
+                        var item = repeater_rows.itemAt(i)
+                        h=Math.max(h,item.columnHeight())
+                    }
+                    return h
                 }
             }
         }
@@ -192,17 +246,18 @@ Item {
     Component{
         id:com_text
         Item{
+            height: table_value.implicitHeight + 20
             FluCopyableText{
                 id:table_value
                 text:String(model.itemData)
                 width: Math.min(parent.width - 14,implicitWidth)
                 wrapMode: Text.WordWrap
-                onImplicitHeightChanged: parent.parent.parent.height = Math.max(implicitHeight + 20,itemHeight)
                 anchors{
                     verticalCenter: parent.verticalCenter
                     left: parent.left
                     leftMargin: 14
                 }
+                rightPadding: 14
                 MouseArea{
                     id:item_mouse
                     hoverEnabled: true