Making a dynamic sizing table lock it's size when window enlarged - html

Question

I have a dynamically resizing table for small browser windows. It resizes great! It looks great under 810px, but the problem is that I want it to lock the size of the table once its over 800px. Right now when I get over 810px, I lose the Arial font and the border-collapse. I don't know why this isn't working!
Please take a look and see if a new set of eyes can spot what's going on.
#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>

Answer 1

You are using vw for font sizes. Size of vw changes according to the device width.
Check this: https://jsfiddle.net/LtLmr5s5/1/

Answer 2

All you need here is one simple CSS property: max-width
#formatscreen {
max-width: 800px;
width: 100%;
/* ... */
}

Answer 3

Your code works fine if you remove the in CSS not allowed // comments:
//# width:800px
//2.5vw = 20px
//1.75vw = 14px
//1vw = 8px
They can be used in SCSS only.
So this is enough:
#formatscreen {
font-family: Arial;
width: 800px;
border-collapse: collapse;
}
/* ... */
#media only screen and (max-device-width: 480px),
(max-width:810px) {
#formatscreen {
width: 100%;
}
/* ... */
}
/* ... */
Furthermore there is no need to set a media query for this as you can see in TheThirdMans answer.