Задание фиксированной ширины столбца в jQuery Datatables

Question

Я пытаюсь указать фиксированную ширину для нескольких столбцов в jQuery datatable. Я попытался выполнить это через определения столбцов, указанные в datatables documentation, но заголовок столбца и столбца по-прежнему получают автоматическое определение размера.

Вот jsFiddle я работал с: jsFiddle

JavaScript:

var table = $('#example2').DataTable({ 
     "tabIndex": 8, 
     "dom": '<"fcstTableWrapper"t>lp', 
     "bFilter": false, 
     "bAutoWidth": false, 
     "data": [], 
     "columnDefs": [ 
      { 
       "class": 'details-control', 
       "orderable": false, 
       "data": null, 
       "defaultContent": '', 
       "targets": 0 
      }, 
      { 
       "targets": 1}, 
      { 
       "targets": 2, 
       "width": "60px"}, 
      { 
       "targets": 3, 
       "width": "1100px"}, 
      { 
       "targets": 4}, 
      { 
       "targets": "dlySlsFcstDay"}, 
      { 
       "targets": "dlySlsFcstWkTtl", 
       "width": "60px"} 
     ], 
     "order": [ 
      [1, 'asc'] 
     ] 
    }); 

HTML:

<div class="forecastTableDiv"> 
      <table id="example2" class="display" cellspacing="0" width="100%"> 
       <thead> 
       <tr> 
        <th colspan="5"></th> 
        <th class="slsFiscalWk" colspan="8">201424</th> 
        <th class="slsFiscalWk" colspan="8">201425</th> 
        <th class="slsFiscalWk" colspan="8">201426</th> 
        <th class="slsFiscalWk" colspan="8">201427</th> 
       </tr> 
       <tr> 
        <!--<th></th>--> 
        <!--<th>Vendor</th>--> 
        <!--<th>Origin ID</th>--> 
        <!--<th>Destination</th>--> 
        <!--<th>Vendor Part Nbr</th>--> 
        <!--<th>SKU</th>--> 
        <!--<th>Mon</th>--> 
        <!--<th>Tue</th>--> 
        <!--<th>Wed</th>--> 
        <!--<th>Thu</th>--> 
        <!--<th>Fri</th>--> 
        <!--<th>Week Ttl</th>--> 

        <th></th> 
        <th>Vendor</th> 
        <th>Origin ID</th> 
        <th style="width: 200px">Vendor Part Nbr</th> 
        <th>SKU</th> 
        <!-- First week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
        <!-- Second week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
        <!-- Third week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
        <!-- Fourth and final week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
       </tr> 
       </thead> 

       <tfoot> 
      </table> 
     </div> 

Когда я проверить живой код, я могу см., что ширина, которую я указываю в определении столбца, добавляется в c olumn как атрибут стиля, но он не соответствует фактической ширине столбца.

Answer 1

Это не проблема DataTables. См. how column widths are determined. На основе этого алгоритма я вижу следующие два решения.

Решение 1

Вычислить себе ширину таблицы и установить его.

#example { 
    width: 3562px; 
} 

См. Живой пример здесь: http://jsfiddle.net/cdog/jsf6cg6L/.

Раствор 2

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

Чтобы сделать это, добавьте классы целевых столбцов, чтобы иметь возможность их стиль:

var table = $('#example').DataTable({ 
    tabIndex: 8, 
    dom: '<"fcstTableWrapper"t>lp', 
    bFilter: false, 
    bAutoWidth: false, 
    data: [], 
    columnDefs: [{ 
    class: 'details-control', 
    orderable: false, 
    data: null, 
    defaultContent: '', 
    targets: 0 
    }, { 
    targets: 1 
    }, { 
    class: 'col-2', 
    targets: 2 
    }, { 
    class: 'col-3', 
    targets: 3 
    }, { 
    targets: 4 
    }, { 
    targets: 'dlySlsFcstDay' 
    }, { 
    targets: 'dlySlsFcstWkTtl' 
    }], 
    order: [[1, 'asc']] 
}); 

Затем установите желаемое значение минимальной ширины собственности для каждого класса:

.col-2, 
.dlySlsFcstWkTtl { 
    min-width: 60px; 
} 

.col-3 { 
    min-width: 1100px; 
} 

Престола живой пример здесь: http://jsfiddle.net/cdog/hag7Lpm5/.

Answer 2

Here is a code sample (fixed the column width for 4 column table):

1. набор Автоширина: ложь;
2. установить значения px в первые 3 столбца;
3. Важно: проверить, если ширина таблицы немного больше, чем 3 столбца + окончательная;

4. отрегулируйте ширину стола и четвертую колонку.

   $('#example').DataTable({ //four column table 
       autoWidth: false, //step 1 
       columnDefs: [ 
        { width: '300px', targets: 0 }, //step 2, column 1 out of 4 
        { width: '300px', targets: 1 }, //step 2, column 2 out of 4 
        { width: '300px', targets: 2 } //step 2, column 3 out of 4 
       ] 
   }); 
   

Набор ширина стола, 4 * 300px:

 #example { width: 1200px }; 

Как результат вы увидите 1-й 3 колонки с 300px шириной и конечной один будет гибким и около 150px (что требует дополнительной регулировка).

---

И последнее, но не менее важное: фиксированного размера колонки 300px не помешают вам от случая, когда ячейка содержит слишком долго (> 300px без пробелов) слова. Поэтому вы должны иметь в виду, что все слова должны быть меньше фиксированной стороны вашего столбца.

Answer 3

для <table> тега или его css class or css id добавить следующий стиль:.

`table{ 
    margin: 0 auto; 
    width: 100%; 
    clear: both; 
    border-collapse: collapse; 
    table-layout: fixed; 
    word-wrap:break-word; 
}`