原生table 表头固定 滚动条美化

table tbody {
        display: block;
        height: 400px;
        overflow: auto;
    }
    table thead,
    tbody tr{
        display: table;
        width: 100%;
        table-layout: fixed;
        text-align: center;
    }
    /*定义滚动条样式（高宽及背景）*/
    table ::-webkit-scrollbar {
        width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
    }
    /*定义滚动条轨道（凹槽）样式*/
    table ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
        border-radius: 3px;
    }
    /*定义滑块 样式*/
    table ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        height: 100px; /* 滚动条滑块长度 */
        background-color: #ccc;
    }

 this.$nextTick(()=>{ // 防止滚动条出现 导致出现表格宽度问题
                let tbody = document.getElementById('tbody')
                if (tbody.scrollHeight>tbody.clientHeight){
                    this.scroll = true
                }else{
                    this.scroll = false
                }
            })