title: How can I set a <td> width to visually truncate its displayed contents?
body: <p>I'm trying to set a column width of a table, which works fine until it gets to the point where child elements would be visually truncated ... then it won't size any smaller.  ("visually truncated"-what doesn't fit appears to be hidden behind the next column)</p>
  
  <p>Here is some sample code to demonstrate my problem:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
      var intervalID = null;
  
      function btn_onClick()
      {
          // keep it simple, only click once
          var btn = document.getElementById("btn");
          btn.disabled = true;     
          // start shrinking
          intervalID = window.setInterval( "shrinkLeftCell();", 100);
      }
  
      function shrinkLeftCell()
      {
          // get elements
          var td1 = document.getElementById("td1");
          var td2 = document.getElementById("td2");
  
          // initialize for first pass
          if( "undefined" == typeof( td1.originalWidth))
          {
              td1.originalWidth = td1.offsetWidth;
              td1.currentShrinkCount = td1.offsetWidth;
          }
  
          // shrink and set width size
          td1.currentShrinkCount--;
          td1.width = td1.currentShrinkCount;  // does nothing if truncating!
  
          // set reporting values in right cell
          td2.innerHTML = "Desired Width : [" 
                      + td1.currentShrinkCount 
                      + "], Actual : [" 
                      + td1.offsetWidth + "]";
  
          // Stop shrinking
          if( 1 &gt;= td1.currentShrinkCount)
              window.clearInterval(intervalID);
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table width="100%" border="1"&gt;
          &lt;tr&gt;
              &lt;td id="td1"&gt;
                  Extra_long_filler_text
              &lt;/td&gt;
              &lt;td id="td2"&gt;
                  Desired Width : [----], Actual : [----]
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;button id="btn" onclick="btn_onClick();"&gt;Start&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried setting the width in different ways including</p>
  
  <pre><code>td1.offsetWidth = td1.currentShrinkCount;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>td1.width = td1.currentShrinkCount + "px";
  </code></pre>
  
  <p>and</p>
  
  <pre><code>td1.style.width = td1.currentShrinkCount + "px";
  </code></pre>
  
  <p>and </p>
  
  <pre><code>td1.style.posWidth = td1.currentShrinkCount;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>td1.scrollWidth = td1.currentShrinkCount;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>td1.style.overflow = "hidden";
  td1.width = td1.currentShrinkCount;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>td1.style.overflow = "scroll";
  td1.width = td1.currentShrinkCount;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>td1.style.overflow = "auto";
  td1.width = td1.currentShrinkCount;
  </code></pre>
  
  <p>I realize, I could probably use DIV's, but I'd prefer not to since the table is being generated from a bound control, and I don't really want to get into rewriting asp.net controls.  </p>
  
  <p>Having said that, I thought as a last ditch effort, I could at least wrap each 'td1's contents with a DIV, and the overflow would take care of things, but even replacing</p>
  
  <pre><code>&lt;td id="td1"&gt;
      Extra_long_filler_text
  &lt;/td&gt;
  </code></pre>
  
  <p>with</p>
  
  <pre><code>&lt;td id="td1" style="overflow:hidden;"&gt;
      &lt;div style="margin=0;padding:0;overflow:hidden;"&gt;
          Extra_long_filler_text
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>didn't work.</p>
  
  <p><strong>Does anybody know how I can set a  width to visually truncate its contents?</strong></p>
  
  <p>BTW-My target browser is IE7.  Other browsers are not important right now, since this is an internal app.</p>