title: Fit cell width to content
body: <p>Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?</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>td.block {
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="width: 100%;"&gt;
    &lt;tr&gt;
      &lt;td class="block"&gt;this should stretch&lt;/td&gt;
      &lt;td class="block"&gt;this should stretch&lt;/td&gt;
      &lt;td class="block"&gt;this should be the content width&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I realize I could hard code the width, but I'd rather not do that, as the content which will go in that column is dynamic.</p>
  <p>Looking at the image below, the first image is what the markup produces. The second image is what I want.</p>
  <p><img src="https://i.stack.imgur.com/stdKt.png" alt="enter image description here" /></p>