Почему горизонтальная прокрутка не go до конца в React JS?

Question

Мой код основан на React, и я добавил горизонтальную полосу прокрутки для таблицы, содержащей 13 столбцов. Но полоса прокрутки прокручивается только до 10-го столбца. В чем причина?

Это мой CSS файл:

.table {
  width: 10%;
  overflow: hidden;
  // overflow-x: scroll;
}

//for chrome
.table::-webkit-scrollbar {
  width: 0 !important;
}

//for firefox &  internet explorer
.table {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

.table:hover::-webkit-scrollbar {
  width: 3px !important;
}

.table:hover {
  scrollbar-width: auto;
  -ms-overflow-style: 10px;
  overflow-x: scroll;
}