Как сделать таблицу заполнением контейнера?

Стол фиксированного размера слева, который действует «липким» с таблицей с переменным размером справа, когда при переполнении следует использовать полосу прокрутки.Как сделать таблицу заполнением контейнера?

Моя проблема заключается в фиксированном размере левой таблицы, и я хочу, чтобы правая сторона стола была отзывчивой и заполнила контейнер до оставшегося 100% размера, который я действительно не знаю, как это сделать.

Я хочу, чтобы он заполнил весь контейнер независимо от размера контейнера. И он также должен быть отзывчивым, поэтому он все еще выглядит нормально при изменении размера окна (что уменьшает его размер). Он тоже должен адаптироваться к этому.

Код можно посмотреть здесь: http://www.bootply.com/JtnSn5A3Mz#

источник

2015-05-14 Daniel Stoica

Как об этом ..

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

источник

2015-05-14 09:22:28 sheshadri

Это все еще оставляет некоторое пространство в правой части. –

А также, если вы уменьшите размер окна, он больше не выглядит goof. Так ... это не так просто. :) –

@ DanielStoica Я обновил свое решение, чтобы проверить это ... – sheshadri

Похоже, вы хотите, чтобы это было положить в реагирующей таблице.
Я установил это в этом Fiddle для вас, используя Таблица реагирования Bootstrap.
Но поскольку вы хотите, чтобы он все еще прокручивал всю ширину таблицы, вы фактически не видите, что она отзывчива, но у вас могут быть другие планы или вы захотите изменить ее в какое-то время.
Интересно видеть некоторые торговые данные и т. Д. Здесь, я пришел с торговой площадки в качестве кодера.

Надеюсь, это поможет вам начать.

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

источник

2015-05-14 12:30:37 AngularJR

Это хорошо .. @ Daniel Stoica, если вы нашли это приемлемым, нажмите правую марку. – sheshadri

Как сделать таблицу заполнением контейнера?

ответ

Смежные вопросы