如何讓表格填充容器？

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>