title: table-layout: fixed percentage and calc not working
body: <p>I have a table with many rows, for which I want to overlay a fixed table header when scrolling. The layout of the page is responsive with a fixed with left hand menu that can have 1 of 2 fixed widths. I am having problems aligning the columns in the fixed header with the table.</p>
  
  <p>As per this fiddle </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    width: 1519px;
  }
  
  #fixedheader {
    width: calc (100% - 100px);
  }
  
  #contenttable {
    width: 100%;
  }
  
  #fixedheader {
    width: calc(100% - 100px);
    position: fixed;
    top: 300px;
    border: 1px solid black;
    background-color: yellow;
  }
  
  .donor_name_header {
    width: calc((100% - 100px)/5);
  }
  
  .total_row_header,
  .total_variance_header {
    width: calc((100% - 100px)/10);
  }
  
  .bar0 {
    background-color: #CCFFCC;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td style="100px"&gt;Left column, width may change between 2 values&lt;/td&gt;
          &lt;td style="position: relative;"&gt;
  
            &lt;table id="fixedheader"&gt;
              &lt;thead&gt;
  
                &lt;tr&gt;
                  &lt;th style="width:20%;"&gt;
                    &amp;nbsp;
                    &lt;!--placehold header row in data block--&gt;
                  &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Jan 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Feb 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Mar 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Apr 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    May 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Jun 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Jul 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Aug 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Sep 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Oct 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Nov 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Dec 17 &lt;/th&gt;
                  &lt;th style="width:10%;"&gt;
                    Total&amp;nbsp;
                    &lt;!--placehold header row in data block--&gt;
                  &lt;/th&gt;
                  &lt;th style="width:10%;"&gt;
                    &lt;!--placehold header row in data block--&gt;
                  &lt;/th&gt;
                &lt;/tr&gt;
  
              &lt;/thead&gt;
            &lt;/table&gt;
            &lt;table id="contenttable"&gt;
              &lt;thead&gt;
  
                &lt;tr&gt;
                  &lt;th style="width:20%;"&gt;
                    &amp;nbsp;
                    &lt;!--placehold header row in data block--&gt;
                  &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Jan 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Feb 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Mar 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Apr 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    May 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Jun 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Jul 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Aug 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Sep 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Oct 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Nov 17 &lt;/th&gt;
                  &lt;th style="width: 5.8333333333333%"&gt;
                    Dec 17 &lt;/th&gt;
                  &lt;th style="width:10%;"&gt;
                    Total&amp;amp;n
                    &lt;table id="fixedheader" style="display: none;"&gt;
                      &lt;thead&gt;
  
                        &lt;tr&gt;
                          &lt;th style="width:20%;"&gt;
                            &amp;nbsp;
                            &lt;!--placehold header row in data block--&gt;
                          &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Jan 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Feb 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Mar 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Apr 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            May 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Jun 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Jul 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Aug 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Sep 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Oct 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Nov 17 &lt;/th&gt;
                          &lt;th style="width: 5.8333333333333%"&gt;
                            Dec 17 &lt;/th&gt;
                          &lt;th style="width:10%;"&gt;
                            Total&amp;nbsp;
                            &lt;!--placehold header row in data block--&gt;
                          &lt;/th&gt;
                          &lt;th style="width:10%;"&gt;
                            &lt;!--placehold header row in data block--&gt;
                          &lt;/th&gt;
                        &lt;/tr&gt;
  
                      &lt;/thead&gt;
                    &lt;/table&gt;bsp;
                    &lt;!--placehold header row in data block--&gt;
                  &lt;/th&gt;
                  &lt;th style="width:10%;"&gt;
                    &lt;!--placehold header row in data block--&gt;
                  &lt;/th&gt;
                &lt;/tr&gt;
  
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr class="each_donor"&gt;
                  &lt;td class="donor_name none" rowspan="2" style="width: 20%;"&gt;
                    &lt;p&gt; First Last&lt;/p&gt;
                    &lt;p&gt;First &amp; Other Last&lt;/p&gt;
                  &lt;/td&gt;
  
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="detail_month" style="width: 5.8333333333333%"&gt;
                    &lt;span class="variance"&gt;&lt;sup&gt;&amp;nbsp;&lt;/sup&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="total_row" rowspan="2"&gt;
                    $360.00 &lt;/td&gt;
                  &lt;td class="total_variance" rowspan="2"&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td class="recurring_period colspan bar0" colspan="12"&gt;
                    $30.00 monthly &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;script&gt;
      // tell the embed parent frame the height of the content
      if (window.parent &amp;&amp; window.parent.parent) {
        window.parent.parent.postMessage(["resultsFrame", {
          height: document.body.getBoundingClientRect().height,
          slug: "None"
        }], "*")
      }
    &lt;/script&gt;
  
  
  
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I cannot find a way to calculate the percentage of the first and last 2 columns correctly. I have tried:</p>
  
  <ul>
  <li>width: calc(20% - 20px);</li>
  <li>width: 20%;</li>
  <li>width: calc(100%-100px)/5; (which seems correct to me and is in snippet)</li>
  </ul>
  
  <p>Unfortunately I can also not move the position: relative to the top</p>