问题描述
我正在尝试设置表格的列宽，它可以正常工作，直到达到子元素在视觉上被截断的程度......然后它的大小不会变小.(视觉上被截断"-不合适的似乎隐藏在下一列后面)
这是一些示例代码来演示我的问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">我尝试以不同的方式设置宽度，包括
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 = "隐藏";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 的内容，溢出会处理事情，但即使替换
Extra_long_filler_text</td>与
<div style="margin=0;padding:0;overflow:hidden;">Extra_long_filler_text</td>
没有用.
有谁知道我如何设置宽度以在视觉上截断其内容?
顺便说一句-我的目标浏览器是 IE7.其他浏览器目前并不重要，因为这是一个内部应用.
解决方案 我刚刚尝试将 table-layout: fixed; 添加到 并且它起作用了对于 IE7 上的我.在固定表格布局中，水平布局只取决于表格的宽度，列的宽度，而不是单元格的内容
查看文档.
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.
解决方案 I just tried adding table-layout: fixed; to the <table> and it worked for me on IE7.
Check out the documentation.
这篇关于如何设置 <td>宽度以在视觉上截断其显示的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-04 02:28