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

StackOverflow https://stackoverflow.com/questions/480722

Вопрос

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

Вот несколько примеров кода, демонстрирующих мою проблему:

<!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.Другие браузеры сейчас не важны, поскольку это внутреннее приложение.

Это было полезно?

Решение

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

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

Проверить документация.

Другие советы

CSS Решение

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

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
}

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

Должно быть 

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

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

РЕДАКТИРОВАТЬ:

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

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

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

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

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

ETA:

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top