Adjustable Table Closed

Dynamic below 800px/mobile and locks in width over 800px

by Alexander Williams

HTML

<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="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">
       ...

CSS

/*#prescreen {
  background: blue;
    max-width: 1024px;
}*/

#formatscreen {
  font-family: Arial;
  max-width: 800px;
  width: 100%;
  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:800px) {
  #formatscreen {
    width: 100%;
  }
  th {
    font-size: 2.5vw;
  }
  #screen_symbol {
    font-size: 5vw;
  }
  #screen_price {
    font-size: 4vw;
  }
  #screen_net_pct {
    font-size: 3vw;
  }
  #screen_expiry.header,
  #screen_type.header,
  #screen_dist.header,
  #screen_short_leg.header,
  #screen_long_leg.header {
    font-size: 2.5vw;
  }
  #screen_change.header,
  #screen_delta.header,
  #screen_short_leg_vol.header,
  #screen_long_leg_vol.header,
  #screen_net.header {
    font-size: 1.75vw;
  }
  #screen_expiry,
  #screen_type,
  #screen_dist,
  #screen_short_leg,
  #screen_long_leg {
    font-size: 3vw;
  }
  #screen_change,
  #screen_delta,
  #screen_short_leg_vol,
 ...