Ширина столбца не работает в datatables bootstrap

Я использую следующий код, чтобы установить ширину столбца datatable. При частичной загрузке страницы ширина кажется правильной, и когда она полностью загружается, ширина отключается.Ширина столбца не работает в datatables bootstrap

<script> 
    $(document).ready(function() { 
     $("#memberGrid").dataTable({ 
      "dom": 'T<"clear">lfrtip', 
      "tableTools": { 
       "sSwfPath": "../../Content/swf/copy_csv_xls.swf" 
      }, 
      "destroy": true, 
      "info": true, 
      "bLengthChange": false, 
      "bFilter": false, 
      "bAutoWidth": false, 
      "aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }] 
     }); 
    }); 
</script>

Таблица Markup

<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid"> 
       <thead class="tablehead"> 
        <tr> 
         <th style="width: 20%">Name</th> 
         <th style="width: 20%">Room with</th> 
         <th style="width: 20%">Extensions</th> 
         <th style="width: 10%">Travel Protection</th> 
         <th style="width: 20%">Flying from</th> 
         <th style="width: 10%">Balance</th> 
        </tr> 
       </thead> 
       <tbody> 
      <tr class="tablerows"> 
       <td style="width: 20%"><%# Eval("Travelers") %></td> 
       <td style="width: 20%"><%# Eval("RoomMates")%></td> 
       <td style="width: 20%"><%# Eval("Extensions")%></td> 
       <td style="width: 10%"><%# (string) Eval("HasTpp") == "Y"? "Yes" : "No"%></td> 
       <td style="width: 20%"><%# Eval("Airport")%></td> 
       <td style="width: 10%">$<%# Eval("Balance")%></td> 
      </tr> 
      </tbody> 
        </table>

источник

2015-05-29 alicewilliam86

Как выглядит ваша разметка? – davidkonrad

Его использование autowidth и не брать указанную ширину. Поэтому определенные столбцы уже, чем я ожидаю. – alicewilliam86

Да, это то, что мы можем видеть в вопросе, но как ваша разметка, структура таблицы, т.е.e '

....' etc? – davidkonrad

ответ

Используйте следующий сценарий, при определении Datatable свойства:

"колонны": [ { "ширина": "25px"}, { "ширина": "25px"}, { «ширина ":" 450px "}, {" width ":" 20px "}, {" width ":" 20px "}, {" width ":" 20px "}, {" width ":" 20px "} , {"width": "20px"} ],

источник

2015-11-11 15:00:56 alicewilliam86

В моем случае мне нужно было добавить «autoWidth: false». Выше только не работал для меня. – hsnkhrmn

Это хороший ответ, но он будет работать только с DataTables v1.10 и выше. Вопрос OP, похоже, использует v1.9. – Kidquick

Было бы хорошо, чтобы увидеть таблицу в действии, но я получаю сильное ощущение, что это чисто вопрос ширины содержимого. Элементы с display: table-cell попытаются расширить, чтобы показать как можно больше содержимого без обертывания. Например, ширина <th> с надписью «Защита путешествий», которую вы определяете как 10% - вам понадобится довольно широкая таблица, чтобы показать «Защита путешествий» в пределах 10%.

Так отменяют по умолчанию word-wrap и word-break параметры <th> так:

table.dataTable thead tr th { 
    word-wrap: break-word; 
    word-break: break-all; 
}

своего рода демо (как было сказано, не может доказательство этого в таблицу IRL) ->http://jsfiddle.net/9vbz7thp/

Самое лучшее было бы отрегулировать содержание <th> так, чтобы они соответствовали жестко закодированным ширинам.

Если содержание <td>-х, который становится слишком большим (как правило, займет слишком много не ломкий слово):

table.dataTable tbody tr td { 
    word-wrap: break-word; 
    word-break: break-all; 
}

КСТАТИ: Вам не нужно определить жёстко прописанные ширины в обоих <th> и <td> " s. <td> автоматически получает ширину от соответствующего <th>.

источник

2015-06-02 17:21:38 davidkonrad

Ваш стол не обертывается, когда у вас есть неразрывное слово. См. Обновленную скрипту: http://jsfiddle.net/9vbz7thp/32/ – kimli

@kimli, это потому, что вы неправильно нацелили «table.dataTable thead tr td» в обновленную скрипту, очевидно, что это должно быть «table.dataTable TBODY tr td '-> ** http: //jsfiddle.net/9vbz7thp/33/**, тогда он работает. – davidkonrad

Вы правы. Спасибо :) – kimli

Для Автоподстройка, Добавьте это явно

var MyDatatable = $("#memberGrid").dataTable(); 


MyDatatable.columns.adjust().draw();

источник

2016-01-27 08:36:06

Что такое "MyItemst"? Я не вижу этого нигде в ОП. – Tony

При установке колонн ширины, необходимо также установить:

autoWidth: false

... на самом DataTable

источник

2017-05-19 09:22:54 ozz

Это решение помогло с моей проблемой, когда таблица с таким же классом столбцов получает разную ширину при срабатывании dataTable. – Woody

oTableDetails = $('#tblUserDetails').dataTable({ 

    "autoWidth":false,

является работающий для меня

источник

2017-06-28 06:05:39

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