Как ограничить ширину столбца таблицы?

Один из столбцов моей таблицы может содержать длинный текст без пробелов. Как я могу ограничить его ширину, скажем, 150px? Я не хочу, чтобы он всегда был 150px (если он пуст, он должен быть узким), но если есть длинный текст, я хочу, чтобы его ограничивали 150px и текст, который должен быть обернут.

Вот пример: http://jsfiddle.net/Kh378/ (пусть ограничивает 3-й столбец).

Спасибо заранее.

Update:
Установка этих стилей:

word-wrap: break-word;
max-width: 150px;

не работает в IE8 (протестирован на разных компьютерах), и я полагаю, что он не работает ни в одной версии IE.

Ответы

Ответ 1

Обновлено

В тегах td и th я добавил:

word-wrap: break-word;
max-width: 150px;

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

Ответ 2

Вместо этого вам нужно использовать ширину.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>                
            <th style="width: 150px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Но только в разделе <thead>.

Ответ 3

Вы можете создать стиль своей колонки:

max-width: 150px; 
word-wrap: break-word;

Обратите внимание, что word-wrap поддерживается в браузерах IE 5.5+, Firefox 3.5+ и WebKit (Chrome и Safari).

Ответ 4

Вопрос ответил на fooobar.com/questions/116512/.... Короче говоря, вы должны просто использовать ширину вместо max-width.

Ответ 5

После некоторых экспериментов в Chrome я пришел к следующему:

  • если ваша таблица имеет <th>, которая должна иметь либо "ширину", либо "максимальную ширину"
  • <td> должен был установить "max-width" и "word-wrap: break-word;"

Если вы используете "ширину" в <th>, это значение будет использоваться. Если вы используете "max-width" в <th>, вместо этого используется значение "max-width" <td>.

Итак, эта функциональность довольно сложная. И я даже не изучал таблицы без заголовков или без длинных строк, которые нуждаются в "слове".

Ответ 6

очень легко

Вы можете добавить такие атрибуты, как эти

max-width

max-height

Они могут быть установлены в html как атрибут или в CSS как стиль

Ответ 7

существует возможность моделирования max-width:

simulateMaxWidth: function() {
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell
    this.$el.find('th').each(function(ind, th) {
        var el = $(th);
        var maxWidth = el.attr('max-width');
        if (maxWidth && el.width() > maxWidth) {
            el.css('width', maxWidth + 'px');
        }
    });
}

эту функцию можно вызывать на $(window).on('resize',...) несколько раз

this.$el

представляет родительский элемент, в моем случае у меня есть марионетка

для тех элементов, которые должны иметь максимальную ширину, должен быть атрибут max-width, например:

<th max-width="120">

Ответ 8

1) Укажите ширину для каждого столбца в <th> в соответствии с вашими потребностями.

2) Добавьте слово wrap для каждого <td> в <tr> <table>.

word-wrap: break-word;