Ширина столбца не работает в начальной загрузке DataTables

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

<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>

Разметка стола

<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>

Ответы

Ответ 1

При определении свойств datatable используйте следующий script:

"столбцы": [ { "width" : "25px" }, { "width" : "25px" }, { "width" : "450px" }, { "width" : "20px" }, { "width" : "20px" }, { "width" : "20px" }, { "width" : "20px" }, { "width" : "20px" } ],

Ответ 2

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

autoWidth: false

... в самом DataTable

Ответ 3

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

Таким образом, для <th> установите значения по умолчанию word-wrap и word-break по умолчанию:

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;
}

BTW: вам не нужно определять жестко кодированные ширины как в <th>, так и <td>. <td> автоматически получить ширину от соответствующего <th>.

Ответ 4

Для автоматической настройки добавьте это явно

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


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

Ответ 5

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

   "autoWidth":false,

работает для меня

Ответ 6

var reCalculateLayoutDatatable = function(){
reCalculateLayoutDatatableYN = true;
setTimeout(function(){
  var tableHeaderWidth = 0;
  $("body").find("div.dataTables_scrollHeadInner table tr.row-header th").each(function() {
    var cols = 1;
    if(parseInt($(this).attr("colspan")) > 1) {
      cols = parseInt($(this).attr("colspan"));
    }
    tableHeaderWidth += parseInt($(this).attr("data-col-width")) + (15 * cols);
  });
  $("body").find("div").css("width","auto");
  $("body").find("table").css("width","auto");
  $("body").find("div.dataTables_scrollBody table").css("width",tableHeaderWidth + "px");
  $("body").find("div.dataTables_scrollHeadInner table").css("width",tableHeaderWidth + "px");
  $("body").find("th,td").each(function(){
    if($(this).attr("data-col-width") > 0){
      $(this).css("width",$(this).attr("data-col-width") +"px");
    }
  });
},50);
}
$( window ).resize(function() {
   if (reCalculateLayoutDatatableYN == true) {
     reCalculateLayoutDatatable();
   }
});
$( document ).ready(function() {
    reCalculateLayoutDatatable();
});

HTML:

<table id="datatableLarge" class="table">
  <thead>
    <tr class="row-header" >
       <th data-col-width="100">管理番号</th>
       <th data-col-width="350">物件名</th>
       <th data-col-width="40">号室</th>
       <th data-col-width="100" >
          管理区分
       </th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td data-col-width="100">1234</td>
       <td data-col-width="350">物件1</td>
       <td data-col-width="40">号室1</td>
       <td data-col-width="100" >
          管理区分
       </td>
  </tbody>

Ответ 7

На самом деле мне пришлось использовать противоположный подход и удалить строку autoWidth (так же, как autoWidth: true) и не забыть поместить желаемую ширину в тот же объект, что и мои данные:

"columns": [{ 'data': 'account.organization_Name', width: '120px' }]

Как видно здесь: http://live.datatables.net/jatazeho/1/edit

Ответ 8

Единственное, что сработало для меня, - это установить встроенную min-width заголовка столбца:

    <table width="100%">
        <tr>
            <thead>
                <th>Ref</th>
                <th style="min-width: 100px">User</th>
                <th>Organisation</th>
            </thead>     
        </tr>
        ...
    </table>