title: Setting the Width of a Table Subheading in CSS
body: <p><a href="https://i.stack.imgur.com/Wn03C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wn03C.png" alt="Table layout using colspan and rowspan"></a></p>
  
  <p>I've got a table like the one pictured above, which uses both colspan and rowspan. I want to fix all the column widths. I can do the first and last (No and Remark), and I can set the width of Types. How can I specify the widths of A, B and C?</p>
  
  <p>I've tried giving cells A, B and C CSS classes and setting individual widths but this does not have any effect. The widths are always controlled by any content in the cells below.</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>table {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
  }
  
  th, td {
    border:solid 1px #000;
    padding:.5em;
  }
  
  .no {
    width:10%;
  }
  
  .type {
    width:50%;
  }
  
  .remark {
    width:40%;
  }
  
  /* these don't work */
  
  .type-a {
    width:10%;
  }
  
  .type-b {
    width:15%;
  }
  
  .type-c {
    width:25%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th rowspan="2" class="no"&gt;No&lt;/th&gt;
        &lt;th colspan="3" class="type"&gt;Type&lt;/th&gt;
        &lt;th rowspan="2" class="remark"&gt;Remark&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th class="type-a"&gt;A&lt;/th&gt;
        &lt;th class="type-b"&gt;B&lt;/th&gt;
        &lt;th class="type-c"&gt;C&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it possible without resorting to placing fixed width divs inside the cells?</p>