1px像素问题、拖拽列宽焦点问题

src/Table.scss

@@ -290,9 +290,9 @@ $table-move-in-color: $bg-color-base;
     }
     th{
       background: $table-head-background-color;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      // overflow: hidden;
+      // white-space: nowrap;
+      // text-overflow: ellipsis;
       .bee-table-column-sorter {
         position: relative;
         margin-left: 4px;
@@ -366,15 +366,25 @@ $table-move-in-color: $bg-color-base;
       &-drag-gap{
         height: 100%;
         position: absolute;
-        right: 0px;
+        right: -10px;
         top: 0;
         // background:transparent;
         // width: 1px;
-        background:#ccc;
-        width: 2px;
+        // background:#ccc;
+        width: 20px;
         
         box-sizing: border-box;
         z-index: 1;
+
+        .online{
+          height: 100%;
+          width: 1px;
+          background:transparent;
+          margin: 0 auto;
+        }
+        .online-hover{
+          background:#000000;
+        }
       }
       .th-drag-gap{
         background:transparent;
@@ -383,6 +393,12 @@ $table-move-in-color: $bg-color-base;
         // background: #ccc;
         cursor: col-resize;
       }
+      .th-drag-gap>div{
+        background:transparent;
+      }
+      .th-drag-gap-hover>div{
+        background: #000000
+      }
       // &.th-can-not-drag{
       //   .th-drag-gap-hover{
       //     cursor: none;

src/TableHeader.js

@@ -102,7 +102,9 @@ class TableHeader extends Component {
     //如果是固定列没有拖拽功能
     if (this.border || data.fixed) return;
     const { clsPrefix } = this.props;
-    event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
+    if(event.target.id != 'th-online'){
+      event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
+    }
   };
 
   ableOnMouseMove = (event, data) => {
@@ -130,7 +132,9 @@ class TableHeader extends Component {
   onMouseOut = (event, data) => {
     if (this.border) return;
     const { clsPrefix } = this.props;
-    event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
+    if(event.target.id != 'th-online'){
+      event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`; 
+    }
   };
   onMouseDown = (event, data) => {
     let {dragAbleOrBord,dragAbleOrBordStart} = this.state;
@@ -484,18 +488,19 @@ class TableHeader extends Component {
                 thClassName += `${fixedStyle}`;
                 if(!da.fixed){
                   thLineObj = {
+                    //----------------
                     onMouseMove:(e)=>{ e.stopPropagation();this.onMouseMove(e, da)},
                     onMouseOut:(e)=>{this.onMouseOut(e, da)},
                     onMouseDown:(e)=>{ e.stopPropagation();this.onMouseDown(e, da)},
                     onMouseUp:(e)=>{this.onMouseUp(e, da)},
                     onMouseOver:(e)=>{this.onMouseOver(e, da)},
-                    className:`${clsPrefix}-thead-th-drag-gap `,
+                    className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`,
                   };
                 }
                 return (<th key={Math.random()} {...thAbleObj} {...thBorObj} className={thClassName}  >
                   {da.children}
                   {
-                    da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} />
+                    da.fixed ? "":<div ref={el => (this.gap = el)} {...thLineObj} ><div id='th-online' className='online' /></div>
                   }
                 </th>)
               }else{