Menu
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)
Here is some sample code to demonstrate my problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script language="javascript" type="text/javascript"> 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 >= td1.currentShrinkCount) window.clearInterval(intervalID); } </script> </head> <body> <table width="100%" border="1"> <tr> <td id="td1"> Extra_long_filler_text </td> <td id="td2"> Desired Width : [----], Actual : [----] </td> </tr> </table> <button id="btn" onclick="btn_onClick();">Start</button> </body> </html> I've tried setting the width in different 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 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.
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
<td id="td1"> Extra_long_filler_text </td> with
<td id="td1" style="overflow:hidden;"> <div style="margin=0;padding:0;overflow:hidden;"> Extra_long_filler_text </div> </td> didn't work.
Does anybody know how I can set a width to visually truncate its contents?
BTW-My target browser is IE7. Other browsers are not important right now, since this is an internal app.
307
Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.
To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively. Just keep in mind, the usage of style attribute overrides any style set globally.
I just tried adding table-layout: fixed; to the <table> and it worked for me on IE7.
In a fixed table layout, the horizontal layout only depends on the table's width, the width of the columns, and not the content of the cells
Check out the documentation.
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
