jQuery DataTables: ширина таблицы управления

Question

У меня проблема с управлением шириной таблицы с помощью плагина jQuery DataTables. Предполагается, что таблица составляет 100% ширины контейнера, но в конечном итоге получается произвольная ширина, а не ширина контейнера.

Предложения приветствуются

Объявление таблицы выглядит так

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

И JavaScript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

Проверяя HTML в Firebug, вы видите это (обратите внимание на добавленный стиль = "width: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Глядя в Firebug на стили, стиль table.display был переопределен. Не могу понять, откуда это исходит

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

Answer 1

Это мой способ сделать это ..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

Answer 2

У меня была похожая проблема, когда содержимое таблицы было больше, чем верхний и нижний колонтитулы таблицы. Добавление div вокруг таблицы и установка x-overflow, похоже, решили эту проблему:

Answer 3

Убедитесь, что все остальные параметры перед bAutoWidth & aoColumns введены правильно. Любой неправильный параметр до того, как нарушит эту функцию.

Answer 4

Это отлично работает.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}

Answer 5

У меня была похожая проблема, и я обнаружил, что текст в столбцах не ломается, и использование этого кода CSS решило проблему

th,td{
max-width:120px !important;
word-wrap: break-word
}