html - How can I set a <td> width to visually truncate its displayed contents? -

I am trying to set a column width of a table, which works properly until this point Where the child element is being visually reducing ... so it will not be of any small size.

There is some sample code for displaying my problem:

  & quot; Lt;! DOCTYPE HTML Public "- // W3C // DTD XHTML 1.0 Transcription // N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> & Lt; Html & gt; & Lt; Top & gt; & Lt; Script language = "javascript" type = "text / javascript" & gt; Var IntervalID = Faucet; Function btn_onClick () {// Keep it simple, only once click var btn = document.getElementById ("btn"); Btn.disabled = true; // Start interval id = window .setInterval ("shrinkLeftCell ();", 100); } Function shrinkLeftCell () {// mill elements var td1 = document.getElementById ("td1"); Var td2 = document.getElementById ("td2"); // Initialization for the first pass if ("undefined" == type (td1.originalWidth)) {td1.originalWidth = td1.offsetWidth; Td1.currentShrinkCount = td1.offsetWidth; } // Shrink and set width size td1.currentShrinkCount--; Td1.width = td1.currentShrinkCount; // nothing is too small! // Reporting Value set in the correct radius td2.innerHTML = "desired width: [" + td1.currentShrinkCount + "], actual: [" + td1.offsetwidth + "]"; // if (1> = td1.currentShrinkCount) shrinks window.clearInterval (intervalID); } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Width of table = "100%" range = "1" & gt; & Lt; TR & gt; & Lt; Td id = "td1" & gt; Extra_long_filler_text & lt; / Td> & Lt; Td id = "td2" & gt; Desired width: [----], Actual: [----] & lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; Button id = "btn" onclic = "btn_on" (); " & Gt; Start & lt; / Button & gt; & Lt; / Body & gt; & Lt; / Html & gt; I have tried to set the width in various ways including  
  td1.offsetwidth = td1.currentShrinkCount;  
 
 and 
 
  td1.width = td1.currentShrinkCount + "px";  
 
 and 
 
  td1.style.width = td1.currentShrinkCount + "px";  
 
 and 
 
  td1.style.posWidth = td1.currentShrinkCount;  
 
 and 
 
  td1.scrollWidth = td1.currentShrinkCount;  
 
 and 
 
  td1.style.overflow = "hidden"; Td1.width = td1.currentShrinkCount;  
 
 and 
 
  td1.style.overflow = "scroll"; Td1.width = td1.currentShrinkCount;  
 
 and 
 
  td1.style.overflow = "auto"; Td1.width = td1.currentShrinkCount; I know, maybe I could use the DIV, but I would not want to since then since the table is bound by the bound control, and I do not really want to rewrite the ARP. I wanted to .not control  
 I thought, as an attempt at the last ditch, I can wrap the content of each TD1 with at least DIV and take care of overflow things, but here Until  
  & lt; Td id = "td1" & gt; Extra_long_filler_text & lt; / Td>  
 
 with 
 
  & 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;  
 
 did not work. 
 
  Do anyone know how I can set a width to visually reduce my content?  
 
 BTW- My target browser is IE7. Other browsers are not important anymore, because this is an internal app. 
 

I just set table-layout: fixed And it works for me on IE7.

In a fixed table layout, horizontal layout only depends on the breadth of the table, the width of the columns, and the contents of cells

check out.