Html 如何使桌子装满容器？

左侧有一个固定大小的表，它起“粘滞”作用，右侧有一个可变大小的表，当它溢出时，应该使用滚动条

我的问题是左边的表是固定大小的，我希望右边的表能够响应并将容器填充到剩余的100%大小，我真的不知道该怎么做

我想让它填满整个容器，不管这个容器有多大。而且它还必须具有响应性，因此在调整窗口大小（使其变小）时，它看起来仍然正常。它也必须适应这种情况

代码可以在这里看到：

这个怎么样

/* CSS used here will be applied after bootstrap.css */

/*for desktop */
@media screen and (min-width: 1200px) {
#snap_scale {
  position: relative;
  top: -16px;
  float: right;
  display: block;
  padding: 0;
  margin: 0;
  margin-top: -24px;
  margin-right: 0px;
}
input[type="radio"] {
  display: none;
}
.history {
  display: block;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 20px;
  color: white;
  background-color: #222;
  border: 3px #47496C solid;
  padding-top: 12px;
  padding-bottom: 12px;
}
#snap_index {
  display: inline-block;
  vertical-align: top;
}
.history td {
  font-family: Cousine;
  font-size: 15px;
  border: 1px solid #666;
  text-align: right;
  min-height: 25px;
  height: 25px;
  vertical-align: middle;
  color: #BADFC7;
  padding-right: 7px;
}
#snap_values {
  display: inline-block;
  width: 95%;
  overflow-x: scroll;
}
.history .history_header td {
  font-family: 'Hammersmith One', sans-serif;
  color: rgba( 255,255,255,0.5);
  background: #444;
  text-align: center;
}
.green {
  color: #8ceab3 !important;
}
}

/* CSS used here will be applied after bootstrap.css */

/*for mobile */
@media screen and (min-width: 200px) and (max-width: 601px){
#snap_scale {
  position: relative;
  top: -16px;
  float: right;
  display: block;
  padding: 0;
  margin: 0;
  margin-top: -24px;
  margin-right: 0px;
}
input[type="radio"] {
  display: none;
}
.history {
  display: block;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 20px;
  color: white;
  background-color: #222;
  border: 3px #47496C solid;
  padding-top: 12px;
  padding-bottom: 12px;
}
#snap_index {
  display: inline-block;
  vertical-align: top;
}
.history td {
  font-family: Cousine;
  font-size: 15px;
  border: 1px solid #666;
  text-align: right;
  min-height: 25px;
  height: 25px;
  vertical-align: middle;
  color: #BADFC7;
  padding-right: 7px;
}
#snap_values {
  display: inline-block;
  width: 75%;
  overflow-x: scroll;
}
.history .history_header td {
  font-family: 'Hammersmith One', sans-serif;
  color: rgba( 255,255,255,0.5);
  background: #444;
  text-align: center;
}
.green {
  color: #8ceab3 !important;
}
}


/*for tab */
@media screen and (min-width: 601px) and (max-width: 1200px){
#snap_scale {
  position: relative;
  top: -16px;
  float: right;
  display: block;
  padding: 0;
  margin: 0;
  margin-top: -24px;
  margin-right: 0px;
}
input[type="radio"] {
  display: none;
}
.history {
  display: block;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 20px;
  color: white;
  background-color: #222;
  border: 3px #47496C solid;
  padding-top: 12px;
  padding-bottom: 12px;
}
#snap_index {
  display: inline-block;
  vertical-align: top;
}
.history td {
  font-family: Cousine;
  font-size: 15px;
  border: 1px solid #666;
  text-align: right;
  min-height: 25px;
  height: 25px;
  vertical-align: middle;
  color: #BADFC7;
  padding-right: 7px;
}
#snap_values {
  display: inline-block;
  width: 90%;
  overflow-x: scroll;
}
.history .history_header td {
  font-family: 'Hammersmith One', sans-serif;
  color: rgba( 255,255,255,0.5);
  background: #444;
  text-align: center;
}
.green {
  color: #8ceab3 !important;
}
}

---

听起来您希望将其放入响应表中。
我已经使用引导程序的响应表为您设置了这一点
但是，当您希望它仍然滚动表格的整个宽度时，您实际上看不到它是否响应，但您可能有其他计划，或者可能希望在某个时候更改它。
有趣的是看到一些交易信息等在这里，我来自一个交易背景作为一个编码

我希望这能让你开始

<div id="snap_values" class="bs-example history" data-example-id="simple-responsive-table">
<div class="table-responsive">
<table class="table table-bordered">
    <thead>

    </thead>
<tbody>

<tr class="history_header">
<th scope="row" class="title_index">Time:</th>
<td class="s0">8:31</td><td class="s1">14:02</td><td class="s2">14:03</td><td class="s3">14:04</td><td class="s4">14:05</td><td class="s5">14:06</td><td class="s6">14:07</td><td class="s7">14:08</td><td class="s8">14:09</td><td class="s9">14:10</td><td class="s10">14:11</td><td class="s11">14:12</td><td class="s12">14:13</td><td class="s13">14:14</td><td class="s14">14:15</td><td class="s15">14:16</td><td class="s16">14:17</td><td class="s17">14:18</td><td class="s18">14:19</td><td class="s19">14:20</td><td class="s20">14:21</td><td class="s21">14:22</td><td class="s22">14:23</td><td class="s23">14:24</td><td class="s24">14:25</td><td class="s25">14:26</td><td class="s26">14:27</td><td class="s27">14:28</td><td class="s28">14:29</td><td class="s29">14:30</td> 
</tr>

<tr class="snap_totals">
<th scope="row" class="title_index">Total:</th>
<td class="s0 green">29M</td><td class="s1 red">-16M</td><td class="s2 red">-12M</td><td class="s3 red">-16M</td><td class="s4 green">9M</td><td class="s5 red">-120M</td><td class="s6 red">-109M</td><td class="s7 red">-96M</td><td class="s8 red">-104M</td><td class="s9 red">-137M</td><td class="s10 red">-152M</td><td class="s11 red">-158M</td><td class="s12 red">-183M</td><td class="s13 red">-185M</td><td class="s14 red">-185M</td><td class="s15 red">-185M</td><td class="s16 red">-282M</td><td class="s17 red">-282M</td><td class="s18 red">-282M</td><td class="s19 red">-282M</td><td class="s20 red">-282M</td><td class="s21 red">-282M</td><td class="s22 red">-282M</td><td class="s23 red">-282M</td><td class="s24 red">-282M</td><td class="s25 red">-283M</td><td class="s26 red">-285M</td><td class="s27 red">-285M</td><td class="s28 red">-285M</td><td class="s29 red">-285M</td>
</tr> 

时间：
8:3114:0214:0314:0414:0514:0614:0714:0814:0914:1014:1114:1214:1314:1414:1514:1614:1714:1814:1914:2014:2114:2214:2314:2414:2514:2614:2714:2814:2914:30 
总数：
29M-16M-12M-16M9M-120M-109M-96M-104M-137M-152M-158M-183M-185M-185M-282M-282M-282M-282M-282M-282M-282M-282M-282M-282M-282M-285M-285M-285M-285M-285M-285M-285M-285M

而且，如果缩小窗口大小，它看起来就不再像傻瓜了。所以…事情没那么简单。：）“响应性”是这里的关键。如果你能帮我，那就太好了。我改变了最初的问题，所以现在一切都应该更清楚了。