如何设置< td>宽度以可视截断其显示内容？ [英] How can I set a <td> width to visually truncate its displayed contents?
问题描述
我试图设置一个表的列宽，它工作正常，直到它到达的点，其中子元素将被视觉截断...然后它不会缩小任何更小。 （视觉截断 - 不适合似乎隐藏在下一列之后）
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;
和
td1.width = td1.currentShrinkCount + "px";
和
td1.style.width = td1.currentShrinkCount + "px";
和
td1.style.posWidth = td1.currentShrinkCount;
和
td1.scrollWidth = td1.currentShrinkCount;
和
td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;
和
td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;
和
td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;
我意识到，我可以使用DIV，但是我不喜欢，因为表是从绑定控件生成，我真的不想进入重写asp.net控件。
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.
说到这里，我想最后一个努力，我可以至少用一个DIV包装每个'td1的内容，溢出将照顾的事情，但甚至取代
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>
<td id="td1" style="overflow:hidden;">
<div style="margin=0;padding:0;overflow:hidden;">
Extra_long_filler_text
</div>
</td>
无效。
strong>有人知道如何设置宽度以可视化截断其内容吗？
Does anybody know how I can set a width to visually truncate its contents?
BTW-我的目标浏览器是IE7。其他浏览器现在不重要，因为这是一个内部应用程序。
BTW-My target browser is IE7. Other browsers are not important right now, since this is an internal app.
推荐答案
我刚刚尝试添加 table-layout：fixed; 到< table> ，它在IE7上适用于我。
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
查看文档。
这篇关于如何设置< td>宽度以可视截断其显示内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
