Есть небольшое по ширине окошко, в которое должна полностью вписаться таблица с нижней прокруткой.
На overflow вообще не реагирует.
Как можно сделать прокрутку влево-вправо для этой таблицы, чтобы она не сжималась из-за небольшой ширины?
Фрагмент кода:
<section class="container">
<div class="personal">
<div class="row">
<div class="col-12 col-lg-3 order-last order-lg-first">
<ul class="list-group">
<li class="list-group-item"><i class="fas fa-user"></i> Аккаунт</li>
<li class="list-group-item"><i class="fas fa-shopping-cart"></i> Корзина (0)</li>
<li class="list-group-item"><i class="fas fa-money-check"></i> Мои заказы</li>
<li class="list-group-item"><i class="fas fa-user-cog"></i> Настройки</li>
<li class="list-group-item"><i class="fas fa-users"></i> Список пользователей</li>
<li class="list-group-item"><i class="fas fa-list"></i> Список заказов</li>
</ul>
</div>
<div class="col-12 col-lg-9">
<div class="table-wrap">
<table class="table table-striped">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Отчество</th>
<th scope="col">Дата рождения</th>
<th scope="col">Номер телефона</th>
<th scope="col">Город</th>
<th scope="col">Улица</th>
<th scope="col">Дом</th>
<th scope="col">E-mail</th>
<th scope="col">Статус</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
И CSS:
.table {
min-width: 1000px;
}
.table-wrap {
width: 100%;
overflow:auto;
}
UPD. Проблема решилась добавлением table-wrap, но из решения вытекла новая. Оно начало выпирать (игнорирует padding от бутстрап):
UPD2. Проблему решил добавлением нового div class="table-wrap" вместо div class="col-12 col-lg-9" (код обновил).