【发布时间】：2019-01-21 15:24:43
【问题描述】：
我正在使用 Bootstrap 4。我希望在表格中做出响应。
实际上，所有这些都是一个表，但我只希望第二列及以后可滚动。我能想到的唯一方法是制作一个嵌套表，其中从第二列开始的所有内容都在它自己的table-response div 中。但是，这是行不通的，只有当我做出整个表响应时才会发生响应。
我将向您展示我所拥有的，也许我们可以努力弄清楚如何让我的混乱做出响应，但如果可以制作一个只有第二列在 x 轴上滚动的表格，那就太棒了。我真的很难过。我希望 ID 为 wannabe-responsive 的表格可滚动，但 ID 为 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 以了解我的进度。我几乎让它完全按照我想要的方式工作，但我仍然遇到内容被缩短的问题。如果你运行小提琴，你会看到它按我想要的方式滚动，但它会切断最后的时间段，以及滚动条的末端，这取决于屏幕有多小。我的最终解决方案是让它始终在底部显示整个滚动条，并在滚动时查看所有时隙。
看看结束时隙和滚动条是如何被切断的？我好近！任何帮助都非常感谢！
【问题讨论】：
-
所以你需要第二个值为 1 2 3 等的表才能水平滚动？
-
@Α.Papadakis 是的，这就是目标。我刚刚发现将
container类添加到带有响应表的td会使其响应！我确实只是发现了这一点，所以如果我找到一个好的解决方案，我会修改它并更新我的问题或答案。请随时在此基础上进行构建，看看是否能找到更好的方法。 -
好的，更新你的代码！我想这是一个样本，而不是实际数据，因为我看不出这个功能的必要性。
-
@Α.Papadakis 请参阅编辑 2 以了解我目前的进度。谢谢！
标签： html css bootstrap-4