title: "Standard" way to reduce table column width to fit child element
body: <p>I have a table with a known width, 776 pixels, and three columns. The third column has a known width, 216 pixels, but the other two do not have known widths. The behavior I want is for the second column to have the same width as its child element. Whatever width is left over, 776 - 216 - 2nd, would be the width for the first column.</p>
  
  <p>I found an example that sets the width of the column that should have its width minimized to 1 pixel. This does seem to work, but it seems like it is a hack and I don't understand why it works. Is there a more "standard" way to achieve the same result?</p>
  
  <p>Here is my HTML with inline CSS as an example:</p>
  
  <pre><code>&lt;table style="width:776px; height:48px;"&gt;
      &lt;tr&gt;
          &lt;td style="height:48px;"&gt;
              &lt;!-- Note: Setting font size to zero prevents white space from contributing to an inline block element's width --&gt;
              &lt;div style="background:#f0f0f0; border:solid 2px #808080; font-size:0; margin-left:8px; text-align:center;"&gt;
                  &lt;a href="#"&gt;&lt;h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;"&gt;Art&lt;/h3&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;"&gt;Events&lt;/h3&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;"&gt;Papers&lt;/h3&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;"&gt;Research&lt;/h3&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;!-- Note: Setting width to one pixel removes horizontal spacing --&gt;
          &lt;td style="vertical-align:middle; width:1px; height:48px;"&gt;
              &lt;h3 style="margin-left:8px;"&gt;&lt;label for="search"&gt;Search:&lt;/label&gt;&lt;/h3&gt;
          &lt;/td&gt;
          &lt;td style="vertical-align:middle; width:216px; height:48px;"&gt;
              &lt;input id="search" style="margin-left:8px; width:208px;" type="text" value="" maxlength="32"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>