title: Making an HTML table column as small as possible but no smaller
body: <p>I have a column with labels and corresponding text boxes, viz:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
    &lt;td&gt;Label:&lt;/td&gt;
    &lt;td&gt;&lt;input type="text"&gt;&lt;/input&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;longer label:&lt;/td&gt;
    &lt;td&gt;&lt;input type="text"&gt;&lt;/input&gt;&lt;/td&gt;
    etc...
  </code></pre>
  
  <p>I want to ensure the first column is wide enough to allow the text in one line, but no wider than necessary, that to allow maximum space for the input boxes (which are set to width 100%). So I don't want to set a specific percentage or explicit width, just something to say "as small as possible but no smaller."</p>
  
  <p>Is there a way to do this in raw html/CSS or do I have to resort to Javascript?</p>
  
  <p>(Obviously if the page is very narrow this is not achievable, but I'm not worried about really narrow browsers.)</p>