Я не могу установить ширину для :: 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:

Спасибо всем заранее!:)