title: HTML table with colspan width
body: <p>I'm using a <code>table</code> that makes use of <code>colspan</code> extensively to display a report but I'm having a bit of an issue with the width of my <code>td</code>.</p>
  <p>Here's a <a href="https://jsfiddle.net/t5tttttq/" rel="nofollow noreferrer">Fiddle</a></p>
  <h3>HTML</h3>
  <pre><code>&lt;table cellspacing='0'&gt;
    &lt;thead&gt;
      &lt;tr&gt;&lt;th colspan='27'&gt;&amp;nbsp;&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot&gt;
      &lt;tr&gt;&lt;td colspan='27'&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;tbody&gt;
      &lt;tr class='odd label-first'&gt;
        &lt;td colspan='7'&gt;Colony&lt;/td&gt;
        &lt;td colspan='20'&gt;Test Colony&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='even label-first'&gt;
        &lt;td colspan='7'&gt;Full Nomenclature&lt;/td&gt;
        &lt;td colspan='20'&gt;Hkfay38hfo9t&lt;sup&gt;hlFH&lt;/sup&gt; 9t3P&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class='odd label-first'&gt;
        &lt;td colspan='7'&gt;Investigator&lt;/td&gt;
        &lt;td colspan='20'&gt;John Smith&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;tr-th&quot;&gt;
        &lt;td colspan='7'&gt;&amp;nbsp;&lt;/td&gt;
        &lt;td colspan='10'&gt;Breeding&lt;/td&gt;
        &lt;td colspan='10'&gt;Non-breeding&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;odd label-first&quot;&gt;
        &lt;td colspan='7'&gt;Cages&lt;/td&gt;
        &lt;td colspan='10' class='c-align'&gt;10&lt;/td&gt;
        &lt;td colspan='10' class='c-align'&gt;2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;!-- &lt;tr class=&quot;even label-first&quot;&gt;
        &lt;td colspan='7'&gt;Estimated Housing Cost Per Month&lt;/td&gt;
        &lt;td colspan='2'&gt;$105.00&lt;/td&gt;
        &lt;td colspan='4'&gt;
          &lt;span class='td-label'&gt;Breeding Rate&lt;/span&gt;0.16
        &lt;/td&gt;
        &lt;td colspan='4'&gt;
          &lt;span class='td-label'&gt;Non-breeding Rate&lt;/span&gt;0.95
        &lt;/td&gt;
        &lt;td colspan='10'&gt;
          &lt;span class='td-label'&gt;Housing Cost Calculation&lt;/span&gt;[ (10 * 0.16) * 30 days ] + [ (2 * 0.95) * 30 days ]
        &lt;/td&gt;
      &lt;/tr&gt; --&gt;
      &lt;tr class=&quot;tr-th&quot;&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
        &lt;td colspan='3' class=&quot;equal&quot;&gt;Width&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class=&quot;odd&quot;&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
        &lt;td colspan='3' class=&quot;c-align equal&quot;&gt;0&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <h3>CSS</h3>
  <pre><code>table {
    border-collapse: collapse;
  }
  
  th, td {
    padding: 7px;
    border: 1px solid #dddddd;
  }
  
  thead, .tr-th, tfoot {
    background-color: #003366;
    color: #ffffff;
    font-weight: bold;
  }
  
  tfoot td {
    padding: 0;
    font-size: 2px;
  }
  
  thead th, .tr-th td, tfoot td {
    border: 1px solid #003366;
    text-align: center;
  }
  
  .odd {
    background-color: #f9f9f9;
  }
  
  .even {
    background-color: #f2f2f2;
  }
  
  .label-first td:first-child {
    background-color: #eeeeee;
  }
  
  .c-align {
    text-align: center;
  }
  
  .td-label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
  }
  
  .equal {
    min-width: 90px;
    width: 90px;
    max-width: 90px;
  }
  </code></pre>
  <h3>jQuery</h3>
  <pre><code>$(document).ready(function() {
      $.each($(&quot;tr&quot;).not(&quot;.tr-th&quot;).find(&quot;.equal&quot;), function(index, element) {
      $(this).html($(this).css(&quot;width&quot;));
    });
  });
  </code></pre>
  <p>I commented out the HTML that I think is causing the width issues. If you take a look at the <a href="https://jsfiddle.net/t5tttttq/" rel="nofollow noreferrer">Fiddle</a> you'll see that the widths of all the <code>td</code> at the bottom of the table are all equal but if you add the <code>tr</code> that was commented out suddenly the <code>td</code> won't have equal widths.</p>
  <p>I'm aware that I could avoid the use of <code>colspan</code> and just use it for when needed but for now let's stick with it.</p>