diff --git a/src/components/header/HeaderTable.tsx b/src/components/header/HeaderTable.tsx
index 25d81b3..1b15b33 100644
--- a/src/components/header/HeaderTable.tsx
+++ b/src/components/header/HeaderTable.tsx
@@ -16,18 +16,20 @@ const HeaderTable: React.FC<IProps> = ({ columns, lineNumberColumnWidth }) => {
   const [display, setDisplay] = React.useState(0);
   const [column, setColumn] = React.useState(-1);
 
-  const onClick: React.MouseEventHandler<HTMLTableDataCellElement> = React.useCallback(
-    (evt) => {
-      evt.preventDefault();
-      setDisplay(display + 1);
-      setColumn(parseInt(evt.currentTarget.id));
-    },
-    [display]
-  );
+  const onClick: React.MouseEventHandler<HTMLTableDataCellElement> =
+    React.useCallback(
+      (evt) => {
+        evt.preventDefault();
+        setDisplay(display + 1);
+        setColumn(parseInt(evt.currentTarget.parentElement?.id as string));
+      },
+      [display]
+    );
 
-  const tableStyle = React.useMemo(() => ({ left: lineNumberColumnWidth }), [
-    lineNumberColumnWidth,
-  ]);
+  const tableStyle = React.useMemo(
+    () => ({ left: lineNumberColumnWidth }),
+    [lineNumberColumnWidth]
+  );
 
   const columnStyle = React.useMemo(
     () => ({
@@ -46,7 +48,6 @@ const HeaderTable: React.FC<IProps> = ({ columns, lineNumberColumnWidth }) => {
           className="ac-datagrid--header--main__panel_cell"
           id={String(ci)}
           key={ci}
-          onClick={onClick}
           style={columnStyle}
         >
           {column == ci ? (
@@ -63,7 +64,9 @@ const HeaderTable: React.FC<IProps> = ({ columns, lineNumberColumnWidth }) => {
               )}
             </>
           ) : null}
-          <span>{col.label}</span>
+          <span onClick={onClick} className="content">
+            {col.label}
+          </span>
           <Resizer index={ci} col={col} />
         </td>
       );
diff --git a/src/components/resizer/Resizer.tsx b/src/components/resizer/Resizer.tsx
index 0e28f75..7a81d57 100644
--- a/src/components/resizer/Resizer.tsx
+++ b/src/components/resizer/Resizer.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
-import debounce from "lodash.debounce";
 import { useDatagridDispatch } from "../../context/DatagridContext";
 import { ContextActionTypes, IColumn } from "../../@interface";
+import { throttle } from "lodash";
 
 interface IProps {
   index: number;
@@ -20,7 +20,7 @@ const Resizer: React.FC<IProps> = ({ index, col }) => {
     evt.preventDefault();
 
     const startClientX = evt.clientX;
-    const mouseMove = debounce((evt: MouseEvent) => {
+    const mouseMove = throttle((evt: MouseEvent) => {
       let newResizerX = offsetX + (evt.clientX - startClientX);
       // check limit
       if (newResizerX < 0) {
@@ -30,7 +30,7 @@ const Resizer: React.FC<IProps> = ({ index, col }) => {
       }
       newResizerPosition = newResizerX;
       setOffsetX(newResizerX);
-    }, 10);
+    }, 30);
     const mouseMoveEnd = () => {
       setResizerActive(false);
       dispatch({
diff --git a/src/style/header.less b/src/style/header.less
index 7542b2d..d77b096 100644
--- a/src/style/header.less
+++ b/src/style/header.less
@@ -40,6 +40,14 @@
   position: absolute;
 }
 
+.ac-datagrid--header--main__panel_cell > span.content {
+  transition: all 0.3s;
+  &:hover {
+    opacity: 0.7;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
 .ac-datagrid--header--main__panel_cell .arrow_icon {
   display: inline-block;
   height: 0;
@@ -58,8 +66,3 @@
 .ac-datagrid--header--main__panel_cell .arrow_icon_up {
   border-bottom: 5px solid #000;
 }
-
-.ac-datagrid--header--main__panel_cell:hover {
-  background-color: skyblue;
-  opacity: 0.5;
-}