title: Unable to change table height
body: <p>I have a table and i want to change its height but when i add the hieght element in the css, nothing changes, i also tried a solution on stackoverflow (<a href="https://stackoverflow.com/questions/17351545/not-able-to-set-table-height">Not able to set table height</a>) but none seem to be working. What am i doing wrong?</p>
  
  <p>HTML - </p>
  
  <pre><code> &lt;div class="tableDiv"&gt;
         &lt;table class="table table-bordered table-condensed" id="StoreData"&gt;
           &lt;thead&gt;
               &lt;tr&gt;
                  &lt;th&gt;County / Admin district&lt;/th&gt;
                  &lt;th&gt;Postcode&lt;/th&gt;
                  &lt;th&gt;Longitude&lt;/th&gt;
                  &lt;th&gt;Latitude&lt;/th&gt;
               &lt;/tr&gt;
             &lt;/thead&gt;
             {% for Postcode, LongLat in LocationData.items() %}
             &lt;tr&gt;
               &lt;td&gt;{{ LongLat[0] }}&lt;/td&gt;
               &lt;td&gt;{{ Postcode }}&lt;/td&gt;
               &lt;td&gt;{{ LongLat[1] }}&lt;/td&gt;
               &lt;td&gt;{{ LongLat[2] }}&lt;/td&gt;
             &lt;/tr&gt;
            {% endfor %}
          &lt;/table&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS - </p>
  
  <pre><code>   &lt;style media="screen"&gt;
        html, body, table {
        height: 100%;
        }
        .tableDiv {
        height: 50%;
        }
        table thead {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 999;
        background-color: white;
        color: black;
        }
        #storeform {
        margin-left: 700px;
        margin-top: 50px;
        margin-bottom: 50px;
        }
        #StoreData {
        margin: 10px auto;
        padding: 10;
        width: 1250px;
        overflow-y: scroll;
        }
     &lt;/style&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>