我在使用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，你会看到这一点（注意添加的样式=“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%;
}
答案 0 :(得分：57)
问题是由于dataTable必须计算其宽度 - 但是当在标签内使用时，它不可见，因此无法计算宽度。解决方案是在选项卡显示时调用'fnAdjustColumnSizing'。
<强>序言
此示例显示如何一起使用带滚动的DataTables 使用jQuery UI选项卡（或者实际上是表格的任何其他方法） 在初始化时隐藏（display：none）元素。原因 这需要特别考虑，就是当DataTables时 初始化，它是一个隐藏的元素，浏览器没有 任何用于提供DataTables的测量，这都需要 在启用滚动时未对齐列。
解决此问题的方法是调用fnAdjustColumnSizing API 功能。此函数将计算列宽 需要根据当前数据然后重绘表 - 这是 当第一个表变得可见时，确切需要什么 时间。为此，我们使用jQuery UI表提供的“show”方法。 我们检查是否已经创建了DataTable（请注意 'div.dataTables_scrollBody'的额外选择器，这是在添加时添加的 DataTable已初始化）。如果表已初始化，我们 重新调整它的大小。可以添加优化以仅重新调整大小 首先显示表格。
初始化代码
$(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 ] }
]
} );
} );
有关详细信息，请参阅this。
答案 1 :(得分：52)
初始化dataTable时，您需要调整两个变量：bAutoWidth和aoColumns.sWidth
假设您有4列宽度为50px，100,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
注意此widhts设置与您正在应用的CSS之间的交互。您可以在尝试之前评论现有的CSS，看看你有多接近。
答案 2 :(得分：46)
好吧，我不熟悉那个插件，但是你可以在添加数据表之后重置样式吗？像
这样的东西$("#querydatatablesets").css("width","100%")
？
答案 3 :(得分：46)
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
答案 4 :(得分：11)
我对数据表的列宽有很多问题。对我来说，神奇的解决方法是包括
行table-layout: fixed;
这个css与表的整体css一致。例如，如果您已声明数据表，如下所示：
LoadTable = $('#LoadTable').dataTable.....
然后魔术css行将进入类Loadtable
#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;
}
答案 5 :(得分：7)
TokenMacGuys解决方案效果最好，因为这是jQdataTable中的错误导致的。如果你使用$（'＃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%");
}
});
答案 6 :(得分：5)
将此css类添加到您的页面，它将解决问题：
#<your_table_id> {
width: inherit !important;
}
答案 7 :(得分：5)
使用sWidth为每列明确设置宽度和bAutoWidth: false初始化dataTable解决了我的（类似）问题。喜欢溢出的堆栈。
答案 8 :(得分：5)
您必须至少留下一个没有固定字段的字段，例如：
$('.data-table').dataTable ({
"bAutoWidth": false,
"aoColumns" : [
null,
null,
null,
null,
{"sWidth": "20px"},
{ "sWidth": "20px"}]
});
你可以改变所有，但只留下一个为空，所以它可以拉伸。如果你把宽度放在ALL上它就行不通。希望我今天能帮到别人！
答案 9 :(得分：4)
与Datatable 10.1一样，这很简单。只需在HTML中将width属性放入表中即可。 ie width =“100％”，这将覆盖DT设置的所有CSS样式。
请参阅此http://www.datatables.net/examples/basic_init/flexible_width.html
答案 10 :(得分：4)
"fnInitComplete": function() {
$("#datatables4_wrapper").css("width","60%");
}
这可以很好地调整整个表格宽度。谢谢@Peter Drinnan！
答案 11 :(得分：3)
这里没有一个解决方案适合我。甚至datatables homepage上的示例也无效，因此在show选项中初始化数据表。
我找到了问题的解决方案。诀窍是使用激活选项作为标签，并在可见表格上调用fnAdjustColumnSizing（）：
$(function () {
// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
activate: function (event, ui) {
var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
if (oTable.length > 0) {
oTable.fnAdjustColumnSizing();
}
}
});
// INIT DATATABLES
// options for datatables
var optDataTables = {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [-1] }
]
};
// initialize data table
$('table').dataTable(optDataTables);
});
答案 12 :(得分：2)
你是否在准备好的活动中这样做？
$(document).ready(function() { ... });
调整大小很可能取决于文档是否已满载。
答案 13 :(得分：2)
只是说我和你有完全相同的问题，虽然我只是将JQuery应用于没有任何Ajax的普通表。出于某种原因，Firefox在揭示它之后不会扩展表格。我通过将表放在DIV中，然后将效果应用到DIV来解决问题。
答案 14 :(得分：1)
对于使用固定标题插件调整表格/单元格宽度时遇到问题的任何人：
Datatables依赖于列标签参数的thead标签。这是因为它真的是唯一的原生html，因为大多数表的内部html都是自动生成的。
然而，发生的情况是您的某些单元格可能大于存储在单元格内部的宽度。
即。如果你的表有很多列（宽表）并且你的行有很多数据，那么调用“sWidth”：改变td单元格大小将无法正常工作，因为子行根据溢出内容自动调整td的大小在表初始化并传递其init参数后发生这种情况。
原始thead“sWidth”：参数被覆盖（缩小），因为数据表认为您的表的默认宽度仍为％100 - 它无法识别某些单元格溢出。
为了解决这个问题，我想出了溢出宽度，并通过在表表初始化之后相应地调整表来解决它 - 当我们在它时，我们可以初始化我们的固定头。同一时间：
$(document).ready(function() {
$('table').css('width', '120%');
new FixedHeader(dTable, {
"offsetTop": 40,
});
});
答案 15 :(得分：1)
在ajax调用的“成功”内创建你的fixedheader，你不会在标题和行中有任何对齐问题。
success: function (result) {
/* Your code goes here */
var table = $(SampleTablename).DataTable();
new $.fn.dataTable.FixedHeader(table);
}
答案 16 :(得分：1)
希望这可以帮助那些仍在努力的人。
不要将桌子放在任何容器内。在表格渲染后，将表格的包装器作为容器。我知道这可能在你和桌子上有其他东西的地方无效，但是你可以随时追加那些内容。
对我来说，如果你有一个侧边栏和一个实际上是该边栏偏移量的容器，就会出现这个问题。
$(YourTableName+'_wrapper').addClass('mycontainer');
（我添加了一个面板 - 默认）
而你的班级：
.mycontainer{background-color:white;padding:5px;}
答案 17 :(得分：1)
找到关于这个问题的另一个有用的链接，它解决了我的问题。
<table width="100%">
<tr>
<td width="20%"> Left TD <td>
<td width="80%"> Datatable </td>
</tr>
</table>
答案 18 :(得分：0)
我有类似的问题，发现列中的文本没有中断并使用此css代码解决了问题
th,td{
max-width:120px !important;
word-wrap: break-word
}
答案 19 :(得分：0)
确保bAutoWidth＆amp;之前的所有其他参数正确输入了aoColumns。之前的任何错误参数都会破坏此功能。
答案 20 :(得分：0)
我有一个类似的问题，表的内容比表头和页脚大。在表格周围添加div并设置x-overflow似乎已经解决了这个问题：
答案 21 :(得分：0)
当桌子周围有一个div时，我遇到了类似的问题。
添加位置：相对固定它。
#report_container {
float: right;
position: relative;
width: 100%;
}答案 22 :(得分：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' }
]
});
答案 23 :(得分：0)
我今天遇到同样的问题。
我用一种棘手的方法来解决它。
我的代码如下。
$('#tabs').tabs({
activate: function (event, ui) {
//redraw the table when the tab is clicked
$('#tbl-Name').DataTable().draw();
}
});
答案 24 :(得分：0)
也请检查此解决方案。这可以轻松解决我的DataTable列宽问题
JQuery DataTables 1.10.20引入了columns.adjust()方法，该方法解决了Bootstrap切换选项卡问题
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
答案 25 :(得分：-1)
这很好用。
#report_container {
float: right;
position: relative;
width: 100%;
}