title: How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest
body: <p>This is a hypothetical example:</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, thead, tbody, tr { width: 100%; }
      table { table-layout: fixed }
      table &gt; thead &gt; tr &gt; th { width: auto; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Column A&lt;/th&gt;
            &lt;th&gt;Column B&lt;/th&gt;
            &lt;th&gt;Column C&lt;/th&gt;
            &lt;th class="absorbing-column"&gt;Column D&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;Data A.1 lorem&lt;/td&gt;
            &lt;td&gt;Data B.1 ip&lt;/td&gt;
            &lt;td&gt;Data C.1 sum l&lt;/td&gt;
            &lt;td&gt;Data D.1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Data A.2 ipsum&lt;/td&gt;
            &lt;td&gt;Data B.2 lorem&lt;/td&gt;
            &lt;td&gt;Data C.2 some data&lt;/td&gt;
            &lt;td&gt;Data D.2 a long line of text that is long&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Data A.3&lt;/td&gt;
            &lt;td&gt;Data B.3&lt;/td&gt;
            &lt;td&gt;Data C.3&lt;/td&gt;
            &lt;td&gt;Data D.3&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to have every single column's width to fit its content size, and leave the rest of the space for the one column with the "absorbing-column" class, so that it looks like this:</p>
  
  <pre><code>| HTML                                                                   | 100%
  | body                                                                   | 100%
  | table                                                                  | 100%
  |------------------------------------------------------------------------|
  | Column A | Column B       | Column C | Column D                        |
  |------------------------------------------------------------------------|
  | Column A | Column B lorem | Column C | Column D                        |
  | Column A | Column B       | Column C | Column D                        |
  | Column A | Column B       | Column C | Column D                        |
  |------------------------------------------------------------------------|
  </code></pre>
  
  <p>You see, Column B is a bit bigger than the rest due to the extra data in the first row, but Column D always uses up the remaining space.</p>
  
  <p>I played around with max-width, min-width, auto, etc. and could not figure out how to make this work.</p>
  
  <p>In other words, I want all columns to take whatever width they need and not more, and then I want Column D to use up all of the remaining space inside the 100% width table.</p>