Как я могу ограничить ширину столбца таблицы? - PullRequest
Новая
       5

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

57 голосов
/ 14 сентября 2011

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

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

Заранее спасибо.

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

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

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

Ответы [ 7 ]

59 голосов
/ 14 сентября 2011

Обновлено

К добавленным мной тегам td и th таблицы добавлено: 

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

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

5 голосов
/ 15 августа 2015

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

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

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

4 голосов
/ 14 сентября 2011

Вы должны иметь возможность стилизовать вашу колонку с помощью: 

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

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

2 голосов
/ 10 октября 2017

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

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

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

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

1 голос
/ 11 октября 2017

это очень просто

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

max-width

max-height

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

0 голосов
/ 09 мая 2017

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

2) Добавьте перенос слов для каждого <td> в <tr> из <table>. 

word-wrap: break-word;
0 голосов
/ 28 июня 2016

есть опция для имитации 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, должен быть атрибут max-width, например: 

<th max-width="120">
...