我无法为:: webkit-scrollbar-thumb设置宽度

Question

我正在尝试使用:: webkit-scrollbar减小滚动条的宽度，但是我的代码不起作用，这是我的代码：

/* Horizontal scrollbar */
.table {
    overflow-x: scroll;
}

/* height */
.table::-webkit-scrollbar {
   height: 20px;
}

/* Track */
.table::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
   border-radius: 10px;
}

/* Handle */
.table::-webkit-scrollbar-thumb {
   background: red;
   width: 20px;
}

我在屏幕上看到的是这样：

scrollbar_bad：

但是我需要这样的东西：

scrollbar_ok：

先谢谢大家！ ：）