Bootstrap 4嵌套响应表

Question

我正在使用Bootstrap4。在一个表中有一个表，我想对其进行响应。

实际上，所有这些都是一个表，但我只希望第二列及其后的内容可以滚动。 我能想到的唯一方法是制作一个嵌套表，使第二列开始的所有内容都在其自己的table-response div中。 但是，这不起作用，仅当我对整个表做出响应时，才会发生响应。

我将向您展示我所拥有的东西，也许我们可以努力弄清楚如何使我的混乱响应，但是如果有可能创建一个表格，其中仅第二列向前在x轴上滚动会很棒。 我真的很在这里 我希望ID wannabe-responsive想要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小提琴以查看我的进度。 我几乎可以完全按照自己的意愿进行工作，但是我仍然遇到内容缩短的问题。 如果运行小提琴，您会看到它滚动了我想要的样子，但是它会根据屏幕的大小切断结尾处的时间段以及滚动条结尾处的时间。 我的最终解决方案是始终将整个滚动条显示在底部，并且在滚动时可以看到所有时隙。

现在看起来像这样

看看结束时间和滚动条是如何切断的？ 我好亲密！ 任何帮助都是超级超级赞赏！

Answer 1

我认为嵌套这么多表格不是一个好主意，因为很难处理响应式设计。 我用flex替换了左表，并删除了外部表。 解决方法是：

 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <style type="text/css"> .item { min-height: 350px; border: 1px solid #000; margin-bottom: 20px; background: #f2f2f2 } .names { padding: 50px 0 34px; } .names > div { border: 1px solid #dee2e6; flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; height: 50px; } .table td { height: 50px; } </style> </head> <body> <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> <div class="d-flex p-4"> <div class="d-flex flex-column justify-content-between names pr-2"> <div>Potatoes</div> <div>Apples</div> <div>Corn</div> <div>Lettuce</div> </div> <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> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html>