title: Two Rows in thead, Can't Set Column Widths in Second
body: <p>I have a table with two rows of headings. I want to set the widths of <em>some</em> of the columns in the second row. I set up a <a href="https://codepen.io/alfred3x/pen/GQrNLE" rel="nofollow noreferrer">Codepen</a> to test it out. I find that if I remove the first row of headings, it takes the column widths I've specified without a problem. But with the first row of headings, it ignores the widths of the columns in the second row. :(</p>
  <p>Please note that I have <code>div</code>'s within the <code>th</code>'s so I can style the borders.</p>
  <p>Here's the Code:</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 {
    padding: 10px;
  }
  
  .data-table {
    width: 100%;
    border-spacing: 0 4px;
    border-collapse: separate;
    table-layout: fixed;
  }/* Remove For SCSS*/
    .title-11, .title-21 {
      width: 40px;
    }
    .title-22 {
      width: 100px;
    }
    .title-24 {
      width: 100px;
    }
  
    thead tr th {
      border-collapse: separate; 
      border-spacing: 0 5px;
    }
     .title {
       /*
       background: linear-gradient(to right, transparent 0%, #bbb 0%,
         #bbb calc(100% - 10px), 
         transparent calc(100% - 10px)) 0 99% / 100% 1px 
         no-repeat; 
       */
       text-align: left; 
       padding-right: 10px;
    }
  
    .div-title {
      border-bottom: 1px solid #bbb;
    }
    .hdr-field {
      width: 150px;
    }
    tr .title:last-child {
      padding-right: 0;
    }
    .side-title {
      transform: rotate(-90deg);
      width: 25px;
    }
    .fieldname {
      width: 130px;
    }
    .fieldvalue.dest-data input[type=text] {
      width: 100%;
    }
    .bodySection {
      border-bottom: 10px solid #bbb;
      margin-bottom: 10px;
    }
    tr {
      // border-bottom: 10px solid #bbb;
    }
  /*}*//* For SCSS*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="data-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="title-11"&gt;&lt;/th&gt;
        &lt;th colSpan="2" class="title title-12"&gt;
          &lt;div class="div-title"&gt;Source&lt;/div&gt;
        &lt;/th&gt;
        &lt;th colSpan="2" class="title title-13"&gt;
          &lt;div class="div-title"&gt;Destination&lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th class="title-21"&gt;&lt;/th&gt;
        &lt;th colSpan="1" class="fieldname title title-22"&gt;
          &lt;div class="div-title hdr-field"&gt;Field&lt;/div&gt;
        &lt;/th&gt;
        &lt;th colSpan="1" class="title title-23"&gt;
          &lt;div class="div-title"&gt;Value&lt;/div&gt;
        &lt;/th&gt;
        &lt;th colSpan="1" class="fieldname title title-24"&gt;
          &lt;div class="div-title hdr-field"&gt;Field&lt;/div&gt;
        &lt;/th&gt;
        &lt;th colSpan="1" class="title title-25"&gt;
          &lt;div class="div-title"&gt;Value&lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody class="bodySection"&gt;
      &lt;tr&gt;
        &lt;td rowSpan="2" class="side-title"&gt;Name&lt;/td&gt;
        &lt;td class="fieldname src-data"&gt;Short Name&lt;/td&gt;
        &lt;td class="fieldvalue src-data"My Store/td&gt;
        &lt;td class="fieldname dest-data"&gt;Short Name&lt;/td&gt;
        &lt;td class="fieldvalue dest-data"&gt;&lt;input type="text" value="My Store" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="fieldname src-data"&gt;Long Name&lt;/td&gt;
        &lt;td class="fieldvalue src-data"My Store/td&gt;
        &lt;td class="fieldname dest-data"&gt;Long Name&lt;/td&gt;
        &lt;td class="fieldvalue dest-data"&gt;&lt;input type="text" value="My Store" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody class="bodySection"&gt;
      &lt;tr&gt;
        &lt;td rowSpan="2" class="side-title"&gt;Name2&lt;/td&gt;
        &lt;td class="fieldname src-data"&gt;Short Name2&lt;/td&gt;
        &lt;td class="fieldvalue src-data"My Store/td&gt;
        &lt;td class="fieldname dest-data"&gt;Short Name2&lt;/td&gt;
        &lt;td class="fieldvalue dest-data"&gt;&lt;input type="text" value="My Store2" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="fieldname src-data"&gt;Long Name2&lt;/td&gt;
        &lt;td class="fieldvalue src-data"My Store/td&gt;
        &lt;td class="fieldname dest-data"&gt;Long Name2&lt;/td&gt;
        &lt;td class="fieldvalue dest-data"&gt;&lt;input type="text" value="My Store2" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So just to clarify: the question is how to make the Field columns fixed width, while leaving the Value columns to find their own level.</p>
  <p>Thank you.</p>