Я использую Bootstrap 4. У меня есть таблица в таблице, на которую я хотел бы реагировать.
На самом деле все это одна таблица, но я хочу, чтобы во втором столбце была прокрутка.Единственный способ заставить это работать - создать вложенную таблицу, в которой все, начиная со второго столбца, находится в своем собственном table-response div.Однако это не работает, и отзывчивость происходит только в том случае, если я отвечаю на всю таблицу.
Я покажу вам, что у меня есть, и, возможно, мы можем поработать, чтобы выяснить, как сделать мой беспорядок отзывчивым, но, если возможно, составить таблицу, в которой только второй столбец и далее прокручивается по оси x, что быбудь офигенным.Я действительно в тупике.Я бы хотел, чтобы таблица с идентификатором wannabe-responsive была прокручиваемой, но первая таблица с идентификатором not-responsive осталась на месте.
.item {
min-height: 350px;
border: 1px solid #000;
margin-bottom: 20px;
background: #f2f2f2
}
<div class="container-fluid">
<div class="item mx-5 mt-2" style="overflow: hidden">
<h2 class="p-2 bg-primary text-white">Inventory</h2>
<div class="text-center">
<h3 style="border-bottom: 1px solid #000">Time Chart</h3>
</div>
<table class="table">
<tbody>
<tr>
<td class="p-0">
<table class="table table-bordered text-center">
<tbody>
<tr>
<td class="p-4"></td>
</tr>
<tr>
<td>Potatoes</td>
</tr>
<tr>
<td>Apples</td>
</tr>
<tr>
<td>Corn</td>
</tr>
<tr>
<td>Lettuce</td>
</tr>
</tbody>
</table>
</td>
<td class="container p-0">
<div class="table-responsive">
<table class="table table-bordered text-center">
<thead>
<th>1:20</th>
<th>1:52</th>
<th>2:30</th>
<th>3:17</th>
<th>3:35</th>
<th>4:22</th>
<th>4:45</th>
<th>5:15</th>
<th>6:15</th>
<th>6:30</th>
<th>7:25</th>
<th>7:37</th>
<th>7:50</th>
<th>8:02</th>
<th>8:15</th>
<th>8:27</th>
<th>8:40</th>
<th>8:52</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Редактировать: Я обнаружил, что при добавлении класса container в контейнер <td> таблица ответов делает его отзывчивым, но яУ меня все еще есть проблемы с переполнением данных вне контейнера уровня rop.Я буду обновлять по мере прогресса
Редактировать 2 : Пожалуйста, проверьте мой JS Fiddle , чтобы увидеть мой прогресс.У меня почти все работает так, как я хочу, но у меня все еще есть проблема с сокращением контента.Если вы запустите скрипку, вы увидите, что она прокручивается так, как я хочу, но она отрезает временные интервалы в конце, а также в конце полосы прокрутки, в зависимости от того, насколько маленький экран.Моим окончательным решением было бы, чтобы она постоянно показывала всю полосу прокрутки внизу, и чтобы все временные интервалы можно было просматривать при прокрутке.
Сейчас это выглядит так 
Посмотрите, как отрезаны временные интервалы и полоса прокрутки?Я так близок!Любая помощь супер супер ценится!