Bootstrap 4嵌套响应表
我正在使用Bootstrap4。我希望响应的表中有一个表。
实际上，所有这些都是一个表，但是我只希望第二列及其后的内容可以滚动。我想让它起作用的唯一方法是制作一个嵌套表，使第二列开始的所有内容都位于其自己的table-response div中。但是，这不起作用，仅当我对整个表做出响应时，才会发生响应。
我将向您展示我所拥有的，也许我们可以努力弄清楚如何使我的混乱响应，但是如果有可能创建一个表格，其中仅第二列向前滚动会很棒。我真的很在这里我希望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 个答案:
答案 0 :(得分：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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？