Datatables - изменить ширину столбца с помощью `columnDefs`

Я пытаюсь настроить ширину определенных столбцов (обертывание длинного содержимого AND заголовков) в таблицу, но не была успешной.Datatables - изменить ширину столбца с помощью `columnDefs`

Следуя документации here, я все еще не могу настроить ширину указанных столбцов, я что-то упустил?

У меня есть следующие DataTable параметры для table с id=one и width=100%:

$(document).ready(function(){ 
    $('#one').DataTable({ 
     paging: true, 
     'scrollX': false, 
     'autoWidth': false, 
     'columnDefs' : [ 
      {'targets': [0,1], 'width': '50px'} 
     ], 
     "iDisplayLength": 50, 
     'lengthMenu': [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]], 
     dom: 'Blfrtip', 
     buttons: ['copy', 'csv', 'excel'] 
    }); 
});

Я не указали CSS переопределение в HTML или иначе, так что, возможно, это проблема?

источник

2016-10-17 NickBraunagel

Я не уверен в этом, Ник, но я попытался бы удалить параметр 'autoWidth'. Это может быть проблемой, если вы не указали ширину всех столбцов. Обычно я не использую 'columnDefs' (вместо этого я использую« столбцы »и описываю, что хочу для каждого столбца), и я хочу, чтобы DataTables автоматически сортировал любые столбцы, для которых я не указываю ширину. Поэтому я не использую 'autoWidth'. Это то, что работает для меня. – BobRodes

Спасибо всем за ответы. После некоторого дополнительного копания я понял, что таблица была задана классом nowrap. Так раздражает. После удаления этого класса обертка работает по мере необходимости. Спасибо.

источник

2016-12-02 22:05:36 NickBraunagel

Какие данные вы помещаете в колонку? Свойство width применяется только к элементу th, поэтому, если в ячейках столбца td есть более широкие элементы, они могут сделать столбец шире, чем вы ожидаете. Например, изображение шириной более 50 пикселей сделает столбец более широким, чем 50 пикселей.

источник

2016-10-17 20:19:43

Все данные являются строками. Хорошая точка в обновлениях 'th' против' td'. Итак, есть ли способ, который я могу обновить 'td'? – NickBraunagel

@NickBraunagel Я бы не стал. Вам нужна ширина для столбца, поэтому 'th' является более чистым. И DataTables всегда будут вставлять строки в любом случае, если вы не укажете иначе. Возможно, ваши строки не имеют пробелов и более широкие, чем подходят в 50 пикселей? Я никогда не пробовал это раньше, поэтому я не знаю, что он будет делать. Не пробовал, потому что я бы не хотел, чтобы колонка была более узкой, чем все мои данные. Я не могу представить, почему вы тоже можете, но ...? – BobRodes

@NickBraunagel AFAIK вам нужно будет использовать CSS, чтобы нацелить 'td' отдельно от' th'. При этом ячейки не будут подчиняться объявлениям 'width' или' max-width', поскольку в [макетах таблицы используются вычисления с фиксированной или автоматической шириной] (https://www.w3.org/TR/CSS2/tables. HTML # ширин-макет). Для точности ширины, которую вы ищете, вы почти застреваете, меняя значение 'display' для ячеек на' inline-block' или что-то в этом роде. –

Datatables - изменить ширину столбца с помощью `columnDefs`

ответ

Смежные вопросы