title: How to keep the column width in an HTML table equal for all columns based on the widest column
body: <p>I see a lot of questions regarding column width, but I was not able to find an answer for a scenario exactly like mine.</p>
  
  <p>Here is my table:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td colspan="3"&gt;Title goes here&lt;/td&gt;
          &lt;td&gt;A&lt;/td&gt;
          &lt;td class="right"&gt;B&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td rowspan="3"&gt;C&lt;/td&gt;
          &lt;td&gt;D&lt;/td&gt;
          &lt;td&gt;E&lt;/td&gt;
          &lt;td&gt;F&lt;/td&gt;
          &lt;td class="right"&gt;G&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;H&lt;/td&gt;
          &lt;td colspan="2" class="center"&gt;I&lt;/td&gt;
          &lt;td rowspan="2" class="right"&gt;J&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;K&lt;/td&gt;
          &lt;td&gt;L&lt;/td&gt;
          &lt;td&gt;M&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td class="right"&gt;N&lt;/td&gt;
          &lt;td colspan="4" class="center"&gt;O&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and here is my CSS:</p>
  
  <pre><code>&lt;style&gt;
      table 
      {
          table-layout: fixed;
  
      }
  
      table, td 
      {
          border: 1px solid;
      }
  
      .right 
      {
          text-align:right;
          vertical-align:bottom;
      }
      .center 
      {
          text-align: center;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>What I want to achieve is all five columns to have the same width based on the widest one. The idea is that I don't know how big the title will be. I know that I could set a fixed width for the table (e.g. 200px or 100%), but I don't want to do that. I want both the width of the columns and the width of the table to expand as the title expands. And as you can see the title spans three columns.</p>