title: HTML table: Set width of column to fit floating content
body: <p>I need some advice on how to set column widths in a HTML table.
  I have a simple table that spans the entire width of the containing div.
  (Using table width="100%")</p>
  
  <p>Here's the rendering:</p>
  
  <p><img src="https://i.stack.imgur.com/0Yga5.gif" alt="enter image description here"></p>
  
  <p>What I want to achieve is that the last column "Weight" is <em>exactly</em> the size of the contained elements.
  The contained elements are the slider and a text input. The slider is floated left.</p>
  
  <p>First I thought about setting a smaller than needed size for the last column (e.g. width="1%"), so that the column would auto-adjust to the minimum size.
  But then the problem is that the content wraps:</p>
  
  <p><img src="https://i.stack.imgur.com/ibPuQ.gif" alt="enter image description here"></p>
  
  <p>So how can I specify a fixed size for the last column which is exactly the size of the slider+input content, knowing that the slider has fixed size in pixels, but the input has size given in "em", i.e. it will depend on font settings etc.</p>
  
  <p>Edit1<br>
  (See comment from Atul Gupta.)<br>
  Using <code>&lt;td style="white-space:nowrap; width:1%"&gt;...&lt;/td&gt;</code>: </p>
  
  <p><img src="https://i.stack.imgur.com/I17PE.gif" alt="enter image description here"></p>
  
  <p>Edit2<br>
  If this might be important, the slider control is actually taken from:
  <a href="http://www.frequency-decoder.com/2008/08/01/unobtrusive-slider-control-v2/" rel="nofollow noreferrer">Unobtrusive Slider Control V2</a><br>
  I never figured out the details, but it dynamically adds to the text <code>&lt;input&gt;</code>.<br>
  I was able to get it floating left by adding an extra class with <code>float:left</code>;  </p>
  
  <p>Some more info:<br>
  The slider and text input are instantiated like this:  </p>
  
  <pre><code>&lt;input name="w-e2-09" id="w-e2-09" type="text" title="Range: 0 - 100" class="fd_slider fd_jump fd_slider_cn_extraclass" value="50"  maxlength="3" size="3" /&gt;
  </code></pre>
  
  <p><code>fd_slider_cn_extraclass</code> makes the slider internally use this:</p>
  
  <pre><code>div.extraclass
  {
    width:120px;
    float:left;
  }
  </code></pre>
  
  <p>If I omit float left, the text box breaks to the next line like in second screenshot (even when there is space available). That's why I have added float left.</p>
  
  <p>Edit3<br>
  Here's the full HTML details of the table row (after slider JS insertion), as given by Firebug:</p>
  
  <pre><code>&lt;tr&gt;
              &lt;td&gt;&lt;img src="images/buildings/city.png"&gt;&lt;/td&gt;
              &lt;td&gt;Urban Infrastructure&lt;/td&gt;
              &lt;td class="numeric em"&gt;13 &lt;i&gt;(+2)&lt;/i&gt;&lt;/td&gt;
              &lt;td class="numeric"&gt;10&lt;/td&gt;
              &lt;td&gt;
                &lt;div class="fd-slider extraclass" id="fd-slider-w-e2-09" aria-disabled="false"&gt;&lt;span class="fd-slider-inner"&gt;&lt;/span&gt;&lt;span class="fd-slider-bar"&gt;&lt;/span&gt;&lt;button type="button" class="fd-slider-handle" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50" style="left: 50px;"&gt;&amp;nbsp;&lt;/button&gt;&lt;/div&gt;&lt;input type="text" size="3" maxlength="3" value="50" class="fd_slider fd_jump fd_slider_cn_extraclass" title="Range: 0 - 100" id="w-e2-09" name="w-e2-09"&gt;
              &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The slider related CSS is available via this link:
  <a href="http://www.frequency-decoder.com/demo/slider-v2/slider-v2.zip" rel="nofollow noreferrer">http://www.frequency-decoder.com/demo/slider-v2/slider-v2.zip</a></p>
  
  <p>Edit4<br>
  Here's a minimum HTML sample that demonstrates the issue and can serve as a laboratory:<br>
  I replaced the slider by a simple fixed size div. The result is the same.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Test Table&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="width:40em";&gt;
      &lt;table width="100%" border="1"&gt;
        &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;Sector&lt;/th&gt;&lt;th width="1%"&gt;Weight&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;Urban Infrastructure&lt;/td&gt;
              &lt;td style="display:inline; white-space:nowrap;"&gt;
                &lt;div style="width:120px; background-color:#BBB; float:left;"&gt;&amp;nbsp;&lt;/div&gt;
                &lt;input type="text" value="50" size="3" /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>