title: CSS table column widths not fitting certain screen sizes
body: <p>I am using a table-layout: fixed table to set percentage widths of columns, but for some reason the columns don't span the width of the table for certain screen sizes - 1300px and up to be exact. The percentages (not exact here) add up to 100% and the columns fit the table under 1300px. Anyone know how to make it work for all screen sizes?</p>
  <p>Shrinking the column width for the largest column makes it wider at the large screen sizes, no idea why. And if I do that the percentages don't add up to 100%, and doesnt seem to fit any rhyme or reason that I could generate the percentages mathematically.</p>
  <p>here is the general html/css</p>
  <pre><code>&lt;style&gt;
   table {
    display: block;
    height: 272px;
    overflow-y: auto;
    table-layout: fixed;
    width: 100%
   }
  
   .th1 {
    width: 29.41%;
   }
  
   .th2 {
    width: 17.64%;
   }
  &lt;/style&gt;
  
  &lt;table&gt;
   &lt;thead&gt;
    &lt;tr&gt;
     &lt;th class='th1'&gt;header1&lt;/th&gt;
     &lt;th class='th2'&gt;header2&lt;/th&gt;
     &lt;th class='th2'&gt;header3&lt;/th&gt;
     &lt;th class='th2'&gt;header4&lt;/th&gt;
     &lt;th class='th2'&gt;header5&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
     ...stuff
   &lt;/tbody&gt;
  &lt;/table&gt;
  
  </code></pre>