title: calc CSS for col tag
body: <p>**** UPDATED ****
  I found out if I just leave off the last width then it auto fills to the end of the table... why?  No idea, but I guess its just how it works?</p>
  
  <hr>
  
  <p>Here is my fiddle:</p>
  
  <p><a href="https://jsfiddle.net/e8qe6gxL/1/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <pre><code>&lt;div&gt;
    &lt;table&gt;
      &lt;colgroup&gt;
        &lt;col&gt;
        &lt;col&gt;
        &lt;col&gt;
      &lt;/colgroup&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Test1&lt;/th&gt;
          &lt;th&gt;Test2&lt;/th&gt;
          &lt;th&gt;Test3&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Yes&lt;/td&gt;
          &lt;td&gt;No&lt;/td&gt;
          &lt;td&gt;Maybe&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
    width: 300px;
    outline: 3px solid red;
  }
  tr {
    border: 1px solid gray;
  }
  th, td { outline: 1px solid red;}
  table {
    border: 1px solid gray;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    box-sizing: border-box;
  }
  th, td {
    padding: 5px;
  }
  col:first-child { width: 35px; }
  col:nth-child(2) { width: 35%; }
  col:last-child { width: calc(65% - 35px); }
  </code></pre>
  
  <p>There is a difference in safari vs chrome. I think in Safari it doesn't calculate the last one because I even changed it to 25% - 35 and it still filled the width. More than anything I just want to see where the differences are documented. Or if someone wants to explain how they treat them so I don't make this mistake again (btw, the original code works great in chrome... but noticed today in safari the last column was completely collapsed which is what got me investigating)</p>