logo标签列表

jQuery DataTables：控制表格宽度

jquerydatatables
108

我在使用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  
    });  
});  `

在 Firebug 中检查 HTML，你会看到这样的内容（注意添加了 style="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%;  
}
我刚遇到一个问题，IE8中的某一列没有正确调整。罪魁祸首是一个设置了max-width属性的图像。显然，IE8不太喜欢这个属性，并在与datatables相关时忽略了它，即使图像在屏幕上大小正确。将其更改为width解决了问题。 - John B
https://dev59.com/6WQm5IYBdhLWcg3w6SdR#46160726 - Frank Myat Thu
26个回答
0

这是我做事的方式。。

$('#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' }
    ]
});
0
今天我遇到了同样的问题。 我使用了一个巧妙的方法来解决它。 我的代码如下：
$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});
0

我之前遇到了类似的问题，发现列中的文本不会换行，使用这段 CSS 代码解决了问题。

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

我曾遇到过类似的问题，表格内容比表头和页脚还要大。在表格周围添加一个div，并设置x-overflow似乎可以解决这个问题：

0

请确保在bAutoWidth和aoColumns之前的所有其他参数都已正确输入。任何错误的参数都会破坏此功能。

-1

这个运行良好。

#report_container {
   float: right;
   position: relative;
   width: 100%;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接