Joh*_*yre 20 html css html-table column-width column-sizing
我正在尝试设置一个表的列宽,它可以正常工作,直到它到达子元素将被视觉截断的点...然后它将不会更小.("视觉截断" - 不适合似乎隐藏在下一列后面)
以下是一些示例代码来演示我的问题:
<!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>
我试过以不同的方式设置宽度,包括
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控件.
话虽如此,我认为作为最后的努力,我至少可以用DIV包装每个'td1的内容,溢出会处理事情,但甚至更换
<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>
没用.
有谁知道如何设置宽度以直观地截断其内容？
BTW-我的目标浏览器是IE7.其他浏览器现在并不重要,因为这是一个内部应用程序.
| 归档时间： |
|
| 查看次数： |
31154 次 |
| 最近记录： |