title: HTML table - Change the width of a single cell in a column
body: <p>Is there a more elegant solution to achieve the same effect as this?</p>
  
  <p><img src="https://i.stack.imgur.com/n8OOD.png" alt="HTML table with different cell widths in one column"></p>
  
  <p>The code I've got so far is this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Table Test&lt;/title&gt;
      &lt;style type="text/css"&gt;
        table { border-collapse: collapse; }
        td { border: solid 1px; }
        td.nest { padding: 0px; }
        td.nest table td { border-width: 0px 1px; }
        td.nest table td:first-child { border-left: none; }
        td.nest table td:last-child { border-right: none; }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table&gt;
        &lt;colgroup&gt;
          &lt;col style="width: 3em;"/&gt;
          &lt;col style="width: 6em;"/&gt;
          &lt;col style="width: 9em;"/&gt;
        &lt;/colgroup&gt;
        &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;!-- Somehow get rid of the nested table and keep just the tds --&gt;
          &lt;td class="nest" colspan="3"&gt;
            &lt;table&gt;
              &lt;tr&gt;
                &lt;td style="width: 4em;"&gt;1&lt;/td&gt;
                &lt;td style="width: 6em;"&gt;2&lt;/td&gt;
                &lt;td style="width: 8em;"&gt;3&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The only way I can get this working so far is to nest another table inside the first. I don't like it much because ideally I only want one table and there's a lot of extra CSS to match the borders of the first table without adding to the cell (<code>colspan="3"</code>) size. I want to be able to replace the nested table with just a normal <code>&lt;tr&gt;</code> with three <code>&lt;td&gt;</code>s in it.</p>
  
  <p>The only other way I've found to change the width of one cell without affecting the other cells in the column is with <code>position: absolute;</code> but then the next cell in the row is shifted to the left by the width of the adjusted cell, so that doesn't work fully. It's also too hard to get the widths just right.</p>
  
  <p>So, is there any way to get the same effect using just one table, no extra <code>&lt;div&gt;</code>s, etc. and just simple CSS? This example should have only one <code>&lt;table&gt;</code>, nine <code>&lt;td&gt;</code>s and no <code>colspan=</code>s. I'm looking for a pure CSS solution if one exists. It should be able to cope with any arbitrary widths as long as they add up to the original width.</p>