Как можно реализовать горизонтальную прокрутку в таблице, используя Bootstrap 5?

Добрый день!

В Bootstrap 5 действительно есть класс `.table-responsive`, который позволяет создавать горизонтально прокручиваемые таблицы. Этот класс помогает обеспечить адаптивность таблиц на различных устройствах, включая десктопы и мобильные телефоны.

Для реализации горизонтальной прокрутки таблицы с помощью мыши, вам не нужно ничего дополнительно подключать или использовать специальные скрипты. Просто убедитесь, что ваш HTML-код корректен. Вот пример того, как это можно сделать:

```html
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

<div class="container my-3">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Название</th>
                    <th>Описание</th>
                    <th>Цена</th>
                    <th>Количество</th>
                    <th>Общая стоимость</th>
                    <th>Другая информация</th>
                    <th>Еще одна колонка</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Товар 1</td>
                    <td>Описание 1</td>
                    <td>100</td>
                    <td>2</td>
                    <td>200</td>
                    <td>Доп. информация 1</td>
                    <td>Доп. информация 2</td>
                </tr>
                <tr>
                    <td>Товар 2</td>
                    <td>Описание 2</td>
                    <td>150</td>
                    <td>1</td>
                    <td>150</td>
                    <td>Доп. информация 1</td>
                    <td>Доп. информация 2</td>
                </tr>
                <!-- Добавьте больше строк по мере необходимости -->
            </tbody>
        </table>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
```

### Как это работает:

1. **`<div class="table-responsive">`** - Этот контейнер делает вашу таблицу отзывчивой, позволяя ей прокручиваться в горизонтальном направлении, когда контент превышает ширину экрана.

2. **Прокрутка мышью**: На компьютерах вы можете прокручивать таблицу, наведя курсор мыши на таблицу и используя колесо прокрутки. Если таблица шире, чем контейнер, в котором она находится, то она будет отображаться с горизонтальной прокруткой.

### Дополнительные советы:

- Убедитесь, что таблица действительно превышает ширину видимой области, чтобы прокрутка была необходима. Если таблица умещается в контейнере, прокрутка не будет доступна.

- Вы можете добавить стилевые правила CSS, если хотите настроить внешний вид таблицы или ее контейнера.

Если прокрутка по-прежнему не работает, возможно, проблема связана с другими стилями или скриптами, влияющими на поведение таблицы. Убедитесь, что ничего не перекрывает или не изменяет стандартное поведение Bootstrap.

<div class="table-responsive">
  <table class="table">

  </table>
</div>

<script>
  const tableContainer = document.querySelector('.table-responsive');
  
  tableContainer.addEventListener('wheel', function(e) {
    if (e.deltaY !== 0) {
      tableContainer.scrollLeft += e.deltaY;
      e.preventDefault();
    }
  });
</script>