Извечная проблема - широкие HTML таблицы, которые и на десктопных мониторах выглядят не очень, а про мобильные устройства и говорить нечего.
Самое простое и распространенное решение, это добавлять горизонтальную прокрутку через css свойство overflow, но при этом не всегда посетителям сайта очевидно, что на экране телефона таблица, особенно если первая колонка занимает все пространство.
Красивым решением может служить добавление справа тени:
@media (max-width: 480px) {
.table-responsive {
overflow: auto;
position: relative;
max-width: 300px;
margin: 0 auto 60px;
}
.table-responsive table {
display: inline-block;
vertical-align: top;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.table-responsive::after {
content: '';
display: block;
width: 15px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 15px 100%;
background-position: 100% 0%;
}
}