表頭拉伸和分欄拉伸方案

1. 純css極簡版

resize: horizontal;

缺點: 只能在右下角很小的範圍顯示拉伸鼠標，且樣式範圍反斜線

2. 純css美化版

//隱藏掉反斜線
.container::-webkit-resizer  {
    background: transparent;
}

3. 純CSS複雜版

純CSS實現分欄寬度拉伸調整

4. js實現表頭拉伸，分欄同樣有效

function init(){
    let thead = document.querySelector('.ant-table-thead');
    console.log('thead: ', thead);
    let ths = thead.querySelectorAll('th');
    console.log('ths: ', ths);
    ths.forEach(t => {
        t.style.position = 'relative';
        t.insertAdjacentHTML('beforeend', '<i style="position:absolute;right:0;top:0;height:50px;width:30px;background:lightblue;cursor:ew-resize;"></i>');
    })

    thead.addEventListener('mousedown', onMousedown);

    let curI = null;

    function onMousedown(e){
        console.log('mousedown: ', e);
        if(e.target.nodeName.toLowerCase() == 'i'){
            let i = e.target;
            i.setAttribute('data-x', e.clientX);
            i.setAttribute('data-w', i.parentNode.offsetWidth);
            curI = i;
            document.addEventListener('mousemove', onMousemove);
            document.addEventListener('mouseup', onMouseup);
        }
    }
    
    function onMousemove(e){
        let i = curI;
        let offsetx = e.clientX - i.getAttribute('data-x');
        console.log('e.clientX: ', e.clientX, 'data-x: ', i.getAttribute('data-x'));
        i.parentNode.style.width = parseInt(i.getAttribute('data-w')) + offsetx + 'px';
    }
    
    function onMouseup(e){
        document.removeEventListener('mousemove', onMousemove);
        document.removeEventListener('mouseup', onMouseup);
    }
}