Как установить ширину <td> для визуального обрезания отображаемого содержимого?

Я пытаюсь установить ширину столбца таблицы, которая отлично работает до тех пор, пока не дойдет до того, что дочерние элементы будут визуально усечены... тогда размер не будет меньше. ( "визуально усеченный" ), который не подходит, скрывается за следующим столбцом)

Вот пример кода для демонстрации моей проблемы:

<!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>

не работает.

Кто-нибудь знает, как я могу установить ширину, чтобы визуально обрезать ее содержимое?

BTW. Мой целевой браузер - IE7. Другие браузеры сейчас не важны, поскольку это внутреннее приложение.

Ответы

Ответ 1

Я просто попытался добавить table-layout: fixed; в <table>, и он работал у меня в IE7.

В фиксированном расположении таблицы горизонтальный макет зависит только от ширины таблицы, ширины столбцов, а не от содержимого ячеек

Отметьте документацию.

Ответ 2

Решение для CSS

"Усечение" может быть не тем словом, которое вы ищете. Вы можете просто скрыть переполненные символы. Если это так, загляните в "переполнение" css-свойства, которое скроет любое содержимое, прошедшее за объявленные пределы его контейнера.

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

Javascript Solution

Если вы действительно хотите усечь текст в контейнере, вам нужно будет удалить один символ справа, проверить ширину родительского элемента и продолжить удаление символов и тестирование ширины родительского элемента до тех пор, пока ширина родителя не будет соответствовать объявленная ширина.

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

Ответ 3

<td id="td1" style="overflow-x:hidden;">

Должно быть

<td id="td1" style="overflow:hidden;">

overflow-x - это атрибут Microsoft CSS, который теперь является частью CSS3. Я бы придерживался более старого атрибута переполнения.

EDIT:

Как говорит Паоло, вам также нужно добавить табличный макет: исправлено; и укажите ширину таблицы. Далее следует полный пример.

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>

Ответ 4

Насколько я знаю, ячейка таблицы всегда будет растягиваться, чтобы разместить ее содержимое.

Задумывались ли вы об использовании Javascript для динамического обрезания данных в ячейках таблицы, содержащих более определенного количества контента? Кроме того, вы можете сделать это более легко на стороне сервера.

Ответ 5

Вы можете использовать jQuery или простой javascript, чтобы окружать содержимое вашей ячейки (ями) тегами div и устанавливать фиксированную ширину и переполнение: вместо этого скрывать их. Не красиво, но это сработает.

ETA:

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

Так как DIV является ограничивающим элементом, то там, где должна быть установлена ​​ширина.