jQuery DataTables：控制表的宽度
我有一个问题，使用jQuery DataTables插件控制表的宽度。 该表应该是容器宽度的100％，但结果是任意宽度，而不是容器宽度。
build议感激
表格声明看起来像这样
<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%; }
这个问题是由于dataTable必须计算宽度而引起的，但是在tab中使用时，它是不可见的，因此无法计算宽度。 解决方法是在选项卡显示时调用“fnAdjustColumnSizing”。
前言
这个例子展示了如何将带有滚动function的DataTables与jQuery UI选项卡一起使用（或者实际上，在初始化时，表格处于隐藏（display：none）元素的任何其他方法）。 这需要特别考虑的原因是，当DataTables被初始化并且在一个隐藏的元素中时，浏览器没有任何给DataTables的测量，并且当启用滚动时这将需要列未alignment。
解决这个问题的方法是调用fnAdjustColumnSizing API函数。 此函数将根据当前数据计算所需的列宽，然后重新绘制表格 – 这正是表格第一次可见时所需要的。 为此，我们使用jQuery UI表提供的'show'方法。 我们检查DataTable是否已经被创build（注意'div.dataTables_scrollBody'的额外select器，当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 ] } ] } ); } );
看到这个更多的信息。
初始化dataTables时，你需要调整两个variables： 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/usagefind
注意这个widgets的设置和你正在使用的CSS之间的交互。 你可能会在评论你现有的CSS之前，试着看看你有多接近。
那么，我不熟悉那个插件，但是你可以在添加数据表后重新设置样式吗？ 就像是
$("#querydatatablesets").css("width","100%")
.dataTable调用之后？
jQuery('#querytableDatasets').dataTable({ "bAutoWidth": false });
我有很多与数据表的列宽有关的问题。 对我来说这个魔术是包括线
table-layout: fixed;
这个CSS与整个表的CSS。 例如，如果您已经声明了如下的数据表：
LoadTable = $('#LoadTable').dataTable.....
那么魔法的css行就会进入Loadtable类
#Loadtable { margin: 0 auto; clear: both; width: 100%; table-layout: fixed;
}
TokenMacGuys解决scheme效果最好，因为这是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%"); } });
您必须至less留出一个没有固定字段的字段，例如：
$('.data-table').dataTable ({ "bAutoWidth": false, "aoColumns" : [ null, null, null, null, {"sWidth": "20px"}, { "sWidth": "20px"}] });
你可以改变所有，但只留下一个为空，所以它可以拉伸。 如果你把所有宽度都不起作用。 希望我今天帮助了一个人！
显式地使用sWidth为每列设置宽度AND bAutoWidth: false在dataTable初始化中解决了我的（类似的）问题。 爱溢出的堆栈。
"fnInitComplete": function() { $("#datatables4_wrapper").css("width","60%"); }
这工作得很好，以调整整个表的宽度。 谢谢@Peter Drinnan！
就像Datatable 10.1一样，这是直截了当的。 只需在HTML中将width属性放到表格中即可。 即宽度=“100％”，这将覆盖由DT设置的所有CSS样式。
请参阅http://www.datatables.net/examples/basic_init/flexible_width.html
这里没有任何解决scheme为我工作。 即使datatables主页上的示例也无法正常工作，因此无法在show选项中初始化datatable。
我find了解决问题的办法。 诀窍是使用选项卡的激活选项 ，并调用可见表上的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); });
添加这个CSS类到你的页面，它将解决这个问题：
#<your_table_id> { width: inherit !important; }
只是说我和你有完全一样的问题，尽pipe我只是把JQuery应用到没有任何Ajax的普通表。 由于某些原因，Firefox在展示之后不会展开表格。 我解决了这个问题，把表格放在一个DIV中，然后把效果应用到DIV中。
你准备好了吗？
$（document）.ready（function（）{...}）;
大小是最有可能将取决于文件被完全加载。
对于使用固定头插件调整表格/单元格宽度的人来说：
Datatables依赖于用于列宽参数的add标签。 这是因为它真的是唯一的本地html作为表的内部html的大部分被自动生成。
但是，会发生什么情况是您的一些单元格可能会比存储在单元格中的宽度大。
也就是说，如果你的表有很多列（宽表），你的行有很多数据，那么调用“sWidth”：更改TD单元大小将无法正常工作，因为子行自动调整基于溢出的TD内容，这发生在表初始化并通过其init参数后。
原来的thead“sWidth”：参数被覆盖（收缩），因为datatables认为你的表仍然有它的默认宽度％100 – 它不能识别出一些单元溢出。
为了解决这个问题，我想出了溢出宽度，并在表初始化之后相应调整表的大小来解决这个问题 – 当我们处于这个位置时，我们可以同时启动我们的固定头文件：
$(document).ready(function() { $('table').css('width', '120%'); new FixedHeader(dTable, { "offsetTop": 40, }); });
在你的ajax调用的“成功”内部创build你的fixedheader，你将不会在头和行中有任何alignment问题。
success: function (result) { /* Your code goes here */ var table = $(SampleTablename).DataTable(); new $.fn.dataTable.FixedHeader(table); }
find有关这个问题的另一个有用的链接，它解决了我的问题
<table width="100%"> <tr> <td width="20%"> Left TD <td> <td width="80%"> Datatable </td> </tr> </table>
Datatables强制宽度表
当在桌子上缠绕一个div时，我遇到了类似的问题。
添加位置：相对固定它给我。
#report_container { float: right; position: relative; width: 100%; }
我有一个类似的问题，表中的内容比表头和页脚大。 在表格中添加一个div并设置x-overflow似乎已经sorting了这个问题：
确保bAutoWidth＆aColumns之前的所有其他参数都被正确input。任何错误的参数都会破坏此function。
我有类似的问题，发现列中的文本不会中断，使用这个CSS代码解决了这个问题
th,td{ max-width:120px !important; word-wrap: break-word }
这是我的做法..
$('#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' } ] });
希望这可以帮助那些仍在挣扎的人。
不要将桌子放在任何容器内。 在表格呈现之后，将表格的包装容器包装成容器。 我知道这可能是无效的地方，你有什么东西随着表，但你可以随时附加回内容。
对我来说，如果你有一个侧栏和一个实际上是该侧栏的偏移量的容器，就会出现这个问题。
$(YourTableName+'_wrapper').addClass('mycontainer');
（我添加了面板面板 – 默认）
和你的class级：
.mycontainer{background-color:white;padding:5px;}
我今天遇到同样的问题。
我用一个棘手的方式来解决它。
我的代码如下。
$('#tabs').tabs({ activate: function (event, ui) { //redraw the table when the tab is clicked $('#tbl-Name').DataTable().draw(); } });
这工作正常。
#report_container { float: right; position: relative; width: 100%; }
