title: How to adjust column width of columns created with colspan
body: <p>I would like to have control of the width of the two TH columns identified by the class class="ctrl-EASI"  and class="ctrl-solution".  At the moment they are embedded withing the class 'target-state' and are distributed evenely at 50% / 50%.   I would like the width of the first column to be 30% and the second to be 70%.</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>.target-state{
      width: 30%;
      text-align: center;
      border-right: 2px solid #fff;
      color: #f1f8ff;
      height: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;thead class="ctrl-rpt-header"&gt;
              &lt;tr&gt;&lt;th rowspan="2" class="ctrl-name"&gt;Control Name&lt;/th&gt;&lt;th rowspan="2" class="ctrl-description"&gt;Description&lt;/th&gt;&lt;th rowspan="2" class="ctrl-risks"&gt;Risks&lt;/th&gt;&lt;th colspan="2" class="target-state"&gt;TARGET STATE&lt;/th&gt;&lt;th colspan="4" class="ctrl-benefits"&gt;Benefits&lt;/th&gt;&lt;/tr&gt;
              &lt;tr class="second-row-ctrl-rpt"&gt;&lt;th class="ctrl-EASI"&gt;EASI&lt;/th&gt;&lt;th class="ctrl-solution"&gt;Proposed Solution&lt;/th&gt;&lt;th class="ctrl-risk"&gt;Risk Reduction&lt;/th&gt;&lt;th class="ctrl-client-svc"&gt;Client Svc&lt;/th&gt;&lt;th class="ctrl-efficiency"&gt;Efficiency&lt;/th&gt;&lt;th class="ctrl-competitive-advantage "&gt;Competitive Adv&lt;/th&gt;&lt;/tr&gt;
  
          &lt;/thead&gt;</code></pre>
  </div>
  </div>
  </p>