Поскольку DIV является ограничивающим элементом, именно здесь должна быть установлена ширина.
аюсь установить ширину столбца таблицы, которая работает нормально, пока не дойдет до точки, где дочерние элементы будут визуально усечены ... тогда он не будет иметь меньший размер. («визуально усеченный» - то, что не подходит, похоже, скрыто за следующей колонкой)
Вот пример кода, демонстрирующий мою проблему:
<!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.
Сказав это, я подумал, что в качестве последнего усилия я мог бы по крайней мере обернуть содержимое каждого 'td1 с помощью DIV, и переполнение позаботится о вещах, но даже заменив
<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>
не работал
Кто-нибудь знает, как я могу установить ширину, чтобы визуально обрезать его содержимое?
Кстати, мой целевой браузер IE7. Другие браузеры сейчас не важны, так как это внутреннее приложение.