如何让桌子填满容器？

Question

左边有一个固定大小的表格，它与右边的一个可变大小的表格“粘性”，当它溢出时应该使用滚动条。

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

我希望它填满整个容器，无论容器大小。而且它还必须具有响应性，因此在调整窗口大小（使其更小）时看起来仍然可以。它也必须适应这一点。

代码可以看这里：http://www.bootply.com/JtnSn5A3Mz#

Answer 1

这个怎么样..

/* 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;
}
}

Responsive Grid Demo

Answer 2

听起来您希望将其放入响应式表格中。
我已使用 Bootstrap 的响应表在此 Fiddle 中为您设置。
但是，当您希望它仍然滚动整个表格宽度时，您实际上并没有看到它是响应式的，但您可能有其他计划或可能希望在某个时候更改它。
在这里看到一些交易信息等很有趣，我来自编码员的交易背景。

我希望这能让你开始。

<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>