Databases
StackOverflow2013
Postsdbo
POHow can I set a <td> width to visually truncate its displayed contents?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I set a <td> width to visually truncate its displayed contents?
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJohn MacIntyre
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I set a <td> width to visually truncate its displayed contents?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I set a <td> width to visually truncate its displayed contents?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow can I set a <td> width to visually truncate its displayed contents?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COdupe: http://stackoverflow.com/questions/426398/css-javascript-to-force-html-table-row-on-a-single-line#426950
      singulars
      1. POHow can I set a <td> width to visually truncate its displayed contents?
      1. USTriptych
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload