Как ограничить ширину ячейки таблицы в HTML, если в ней есть пробел: nowrap?

У меня есть ячейка таблицы, для которой я хотел бы иметь следующие эффекты:

width: 100px;
white-space: nowrap;
overflow: hidden;

Другими словами, ячейка всегда должна быть одной строкой текста (ее содержимое гарантированно содержит обычный текст без HTML-разметки), ее ширина не должна превышать 100 пикселей, а если текст длиннее, он должен быть обрезан.

К сожалению, когда текст становится длинным, ячейка все равно растягивается. Протестировано в IE и FF, оба из которых входят в число моих целевых браузеров.

Предложение добавить <div> внутри ячейки и установить ширину на это сложно. Таблица создается из элемента управления gridview, который просто добавляет указанную ширину столбца к элементу <td> и вставляет текст как есть.


html width css-tables
person Vilx-    schedule 09.09.2011    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете установить max-width:100px. Живой пример: http://jsfiddle.net/tw16/RuAVq/

td{
    width: 100px;
    max-width: 100px; /* add this */
    white-space: nowrap;
    overflow: hidden;
}

Проблема в том, что обычно IE этого не поддерживает.

Другое решение, поддерживаемое IE, — использовать float:left. Живой пример: http://jsfiddle.net/tw16/RuAVq/1/

td{
    width: 100px;
    float: left; /* add this */
    white-space: nowrap;
    overflow: hidden;
}
person tw16    schedule 09.09.2011
comment
float:left в ячейке таблицы? О_о - person Vilx-; 09.09.2011
comment
@Vilx-: Да, действительно. Как видно из второго примера, это можно сделать. Это единственные два варианта, которые я могу придумать для решения вашей проблемы. - person tw16; 10.09.2011
comment
Хорошо... Я приму ваш ответ. По правде говоря, в итоге я установил ширину для всей таблицы. Не совсем то, что здесь спрашивали, но это соответствовало моей цели. - person Vilx-; 10.09.2011