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

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

- John McC

---

我刚遇到一个问题，IE8中的某一列没有正确调整。罪魁祸首是一个设置了max-width属性的图像。显然，IE8不太喜欢这个属性，并在与datatables相关时忽略了它，即使图像在屏幕上大小正确。将其更改为width解决了问题。 - John B

https://dev59.com/6WQm5IYBdhLWcg3w6SdR#46160726 - Frank Myat Thu

Answer 1

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

- Suraj

---

这对我来说是正确的答案。我正在使用boostrap .table-responsive。由于datatable代码设置了自己的宽度，因此会妨碍它的使用。 - mac10688

来这里发布我的解决方案，解决了这个愚蠢的问题，涉及到在选项卡更改事件上删除宽度属性，但这似乎已经解决了它。谢谢。+1 - Topher

我有3个选项卡和数据表格在前两个选项卡上，第二个选项卡上的表格宽度不足。这解决了我的问题。谢谢。 - Mike Volmar

Answer 2

问题的原因是dataTable必须计算其宽度，但在选项卡内使用时，它不可见，因此无法计算宽度。解决方法是在选项卡显示时调用'fnAdjustColumnSizing'。

序言

  

此示例展示了如何将带有滚动条的DataTables与jQuery UI选项卡（或其他任何表在初始化时处于隐藏状态（display：none）的方法）一起使用。需要特别考虑的原因是，当DataTables被初始化并且处于隐藏元素中时，浏览器没有任何测量值可以提供给DataTables，并且这将导致启用滚动时列的错位。

     

解决此问题的方法是调用fnAdjustColumnSizing API函数。该函数将基于当前数据计算所需的列宽，然后重新绘制表格 - 这正���第一次显示表格时所需的操作。为此，我们使用jQuery UI tables提供的“show”方法。我们检查DataTable是否已创建或未创建（请注意，当DataTable被初始化时，会添加额外的选择器'div.dataTables_scrollBody'）。如果已初始化表格，则对其进行调整大小。可以添加优化以仅在第一次显示表格时调整大小。

初始化代码

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

请查看此链接以获取更多信息。

- Arik Kfir

---

我和@John McC遇到了同样的问题，但是我将我的datatable应用于模态框，我正在使用bootstrap，但是我卡在了这个问题上...您知道如何使用bootstrap模态框来实现它吗？..我真的需要您的帮助。 - cfz

我建议使用 window.resize，看一个例子 https://legacy.datatables.net/ref#fnAdjustColumnSizing - KingRider

"aoColumnDefs": [{ "sWidth": "10%", "aTargets": [ -1 ] }]。 我解决了我的问题，只需添加这个，谢谢。 - Mina chen

Answer 3

在初始化 dataTables 时，您需要调整两个变量：bAutoWidth 和 aoColumns.sWidth

假设您有4列宽度分别为50px、100px、120px和30px，则应进行以下操作：

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

关于dataTables初始化的更多信息可以在http://datatables.net/usage找到。

注意此宽度设置和您应用的CSS之间的交互作用。在尝试此操作之前，您可能需要注释掉现有的CSS以查看其效果。

- artlung

---

你的意思是bAutoWidth:true会导致列宽度做出不太智能的选择，从而导致这种情况发生。 - John Mac

这是我的想法。如果数据长度不一致，我的表格会跳来跳去。这就是为什么我加入了aoColumns和bAutoWidth参数的原因。 - artlung

太棒了，完全解决了我的问题。 - Laguna

太棒了，@Laguna！很高兴听到这样的老答案仍然有帮助。 - artlung

"bAutoWidth": false 是有效的。但只是一个问题。如果我在<th>标签上放宽度细节，这是一个好的做法还是不好的做法？ - finnTheHumin

@finnTheHuman 我认为这是一种有效的做法，只要它在你的目标浏览器上实际起作用来控制列宽。您还可以查看<colgroup>和<col>标签以控制列宽。有许多选择来格式化表格列宽。我喜欢尽可能少地使用标记。 - artlung

Answer 4

嗯，我不熟悉那个插件，但是在添加数据表后，你能重置样式吗？就像这样：

$("#querydatatablesets").css("width","100%")

在调用 `.dataTable` 之后？

- SingleNegationElimination

---

我也发现这是最好的解决方案，因为在我的情况下，当任何列被隐藏时，表格的宽度也被设置为100px - 请参见此处：http://www.datatables.net/forums/discussion/3417/table-gets-width0px-when-bvisiblefalse-is-used/p1 - mydoghasworms

这是对我有效的解决方案。与先前提到的oTable.fnAdjustColumnSizing();解决方案相比，它可以更精细地控制数据表的CSS。 - Vijay Rumao

Answer 5

我曾经遇到过许多数据表列宽的问题。对我来说，神奇的修复方法就是包括这一行：

table-layout: fixed;

这个 CSS 与表格的总体 CSS 相关。例如，如果您已经声明了以下数据表：

LoadTable = $('#LoadTable').dataTable.....

那么神奇的CSS代码行将放在Loadtable类中。

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

- user1842675

---

这有所帮助，但现在我的列都是奇怪的大小。我本来期望最多数据的列会占据最大的百分比宽度。 - cjbarth

当您的表格具有水平滚动条时，此操作将失败。 - Rabby

Answer 6

TokenMacGuys的解决方案最好，因为这是jQdataTable中一个bug的结果。如果使用$('#sometabe').dataTable().fnDestroy()，表格宽度会被设置为100px而不是100%。以下是一个快速修复方法：

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

- Peter Drinnan

Answer 7

将此CSS类添加到您的页面，它将修复问题：

#<your_table_id> {
    width: inherit !important;
}

- Bahadir Tasdemir

---

我之前遇到了一个单独的问题，已经花了30分钟来解决它 - 这行代码解决了它 - 所以我只是想说感谢这个随机评论。 - user1274820

这正是我提供额外答案的原因。 - Bahadir Tasdemir

Answer 8

您需要至少留下一个没有固定字段的字段，例如：

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

你可以更改所有，但只留一个为空，这样它就可以伸展。如果你为所有内容设置了宽度，那么这种方法将不起作用。希望我今天能帮助到某个人！

- cure85

---

对我来说就是这样了，我将所有列都设置为1像素。留出一个就可以神奇地工作了。谢谢！ - demoncodemonkey

Answer 9

在Datatable 10.1版本中，这很简单。只需在HTML表格中添加width属性。例如：width="100%"，这将覆盖DT设置的所有CSS样式。

请查看http://www.datatables.net/examples/basic_init/flexible_width.html

- Udit

Answer 10

使用sWidth为每个列明确设置宽度，并在dataTable初始化中使用bAutoWidth: false解决了我的（类似的）问题。喜欢这个充满知识的社区。

- tubelight