0
У меня динамически изменяющаяся таблица для небольших окон браузера. Он изменяет размер! Он отлично выглядит под 810px, но проблема в том, что я хочу, чтобы он блокировал размер таблицы один раз с более чем 800 пикселей. Прямо сейчас, когда я получаю 810px, я теряю шрифт Arial и крах. Я не знаю, почему это не работает!Создание динамического размера таблицы блокировки его размер при увеличении окна
Пожалуйста, посмотрите и посмотрите, может ли новый набор глаз определить, что происходит.
#formatscreen {
font-family: Arial;
width: 800px;
border-collapse: collapse;
}
th {
background: black;
color: white;
font-size: 20px;
}
th,
td {
border: 1px solid #000;
border-bottom: 2px solid #fff;
// padding-left: 5px;
// padding-right: 5px;
}
#screen_symbol {
font-size: 40px;
font-weight: bold;
text-align: center;
display: inline-block
}
#screen_price {
font-size: 32px;
font-weight: bold;
display: inline-block
}
#screen_net_pct {
font-size: 24px;
font-weight: bold;
display: inline-block
}
#screen_expiry.header,
#screen_type.header,
#screen_dist.header,
#screen_short_leg.header,
#screen_long_leg.header {
font-size: 20px;
display: inline-block
}
#screen_change.header,
#screen_delta.header,
#screen_short_leg_vol.header,
#screen_long_leg_vol.header,
#screen_net.header {
font-size: 14px;
display: inline-block
}
#screen_expiry,
#screen_type,
#screen_dist,
#screen_short_leg,
#screen_long_leg {
font-size: 24px;
display: inline-block
}
#screen_change,
#screen_delta,
#screen_short_leg_vol,
#screen_long_leg_vol,
#screen_net {
font-size: 16px;
display: inline-block
}
@media only screen and (max-device-width: 480px),
(max-width: 810px) {
#formatscreen {
font-family: Arial;
width: 100%;
border-collapse: collapse;
}
th {
background: black;
color: white;
font-size: 2.5vw;
}
th,
td {
border: 1px solid #000;
border-bottom: 2px solid #fff;
// padding-left: 5px;
// padding-right: 5px;
}
#screen_symbol {
font-size: 5vw;
font-weight: bold;
text-align: center;
display: inline-block
}
#screen_price {
font-size: 4vw;
font-weight: bold;
display: inline-block
}
#screen_net_pct {
font-size: 3vw;
font-weight: bold;
display: inline-block
}
#screen_expiry.header,
#screen_type.header,
#screen_dist.header,
#screen_short_leg.header,
#screen_long_leg.header {
font-size: 2.5vw;
display: inline-block
}
#screen_change.header,
#screen_delta.header,
#screen_short_leg_vol.header,
#screen_long_leg_vol.header,
#screen_net.header {
font-size: 1.75vw;
display: inline-block
}
#screen_expiry,
#screen_type,
#screen_dist,
#screen_short_leg,
#screen_long_leg {
font-size: 3vw;
display: inline-block
}
#screen_change,
#screen_delta,
#screen_short_leg_vol,
#screen_long_leg_vol,
#screen_net {
font-size: 2vw;
display: inline-block
}
}
#screen_change.up {
background: green;
color: white;
}
#screen_change.down {
background: red;
color: white;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
tr[data-bau="Bull Put"] {
background: #99ff99;
}
tr[data-bau="Bear Call"] {
background: #ff9999;
}
tr:hover[data-bau="Bull Put"] {
background-color: #00b300;
cursor: pointer;
}
tr:hover[data-bau="Bear Call"] {
background-color: #ff0000;
cursor: pointer;
}<div id="prescreen">
<table id="formatscreen">
<tr>
<th>
Symbol</th>
<th>Price Action</th>
<th>Expiry Date
<br>Type</th>
<th class="right">
<div id="screen_dist" class="header">Distance</div>
<div id="screen_delta" class="header">Delta</div>
</th>
<th class="right">
<div id="screen_short_leg" class="header">Short Leg</div>
<div id="screen_short_leg_vol" class="header">Volume</div>
</th>
<th class="right">
<div id="screen_long_leg" class="header">Long Leg</div>
<div id="screen_long_leg_vol" class="header">Volume</div>
</th>
<th>Return</th>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bear Call">
<td>
<div id="screen_symbol">NFLX</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="up">+$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
</table>
words words
</div>
Извините, неправильная скрипка. Это одно: https://jsfiddle.net/wolfpack06/3g0brrbw/1/ – Alex