blocks|key|1613547|text|嗯，我不熟悉这个插件，但是你能在添加datatable之后重置样式吗？就像这样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1613548|$("#querydatatablesets").css("width","100%25")|code-block|syntax|javascript|1613549|在.dataTable调用之后？|1613550|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Well, I'm not familiar with that plugin, but could you reset the style after adding the datatable? Something like

<pre><code>$("#querydatatablesets").css("width","100%")
</code></pre>

after the .dataTable call?

blocks|key|1398870|text|在初始化dataTables时，需要调整两个变量：bAutoWidth和aoColumns.sWidth|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1398871|假设您有4列，宽度分别为50px、100、120px和30px，您将这样做：|1398872|jQuery('#querytableDatasets').dataTable({++
++++++++"bPaginate":+false,++
++++++++"bInfo":+false,++
++++++++"bFilter":+false,
++++++++"bAutoWidth":+false,
++++++++"aoColumns"+:+[
++++++++++++{+sWidth:+'50px'+},
++++++++++++{+sWidth:+'100px'+},
++++++++++++{+sWidth:+'120px'+},
++++++++++++{+sWidth:+'30px'+}
++++++++]++
++++});+|code-block|syntax|javascript|1398873|有关dataTables初始化的更多信息，请访问http://datatables.net/usage|1398874|注意此widht设置与您正在应用的CSS之间的交互。你可以在尝试之前注释你现有的CSS，看看你有多接近。|1398875|entityMap|0|LINK|mutability|MUTABLE|url|http://datatables.net/usage^0|P|A|10|G|0|0|0|O|R|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

You'll want to tweak two variables when you initialize dataTables: <code>bAutoWidth</code> and <code>aoColumns.sWidth</code>

Assuming you have 4 columns with widths of 50px, 100, 120px and 30px you would do:

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

More information on the initialization of dataTables can be found at <a href="http://datatables.net/usage" rel="noreferrer">http://datatables.net/usage</a>

Watch for interaction between this setting of widhts and the CSS you are applying. You might comment your existing CSS before trying this to see how close you get.

blocks|key|1613637|text|jQuery('#querytableDatasets').dataTable({++
++++++++"bAutoWidth":+false
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1613638|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>jQuery('#querytableDatasets').dataTable({ 
 "bAutoWidth": false
});
</code></pre>

blocks|key|1613687|text|我只是想说，我遇到了与您完全相同的问题，尽管我只是在没有任何Ajax的情况下将JQuery应用于一个普通的表。出于某种原因，Firefox在披露后并没有扩展该表。我修复了这个问题，将表格放在DIV中，并将效果应用于DIV。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1613688|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Just to say I've had exactly the same problem as you, although I was just apply JQuery to a normal table without any Ajax. For some reason Firefox doesn't expand the table out after revealing it. I fixed the problem by putting the table inside a DIV, and applying the effects to the DIV instead.

blocks|key|1613740|text|当有一个div包在桌子上时，我遇到了类似的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1613741|添加位置:相对为我修复了它。|1613742|#report_container+{
+float:+right;
+position:+relative;
+width:+100%25;
}|code-block|syntax|javascript|1613743|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I ran into a similar issue when having a div wrapped around the table. 

Adding position: relative fixed it for me.

<pre><code>
#report_container {
 float: right;
 position: relative;
 width: 100%;
}</code></pre>

blocks|key|1613801|text|在dataTable初始化中使用sWidth和bAutoWidth:+false显式地设置宽度解决了我(类似)的问题。喜欢溢出的堆栈。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1613802|entityMap^0|1|9|G|6|N|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Setting widths explicitly using <code>sWidth</code> for each column AND <code>bAutoWidth: false</code> in <code>dataTable</code> initialization solved my (similar) problem. Love the overflowing stack.

blocks|key|1399174|text|我也遇到过类似的问题，表格的内容比表格的页眉和页脚还要大。在表周围添加div并设置x-overflow似乎已经解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1399175|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I had a similar issue where the contents of the table were bigger than the table header and footer. Adding a div around the table and setting x-overflow seems to have sorted this issue:

blocks|key|1613900|text|确保bAutoWidth+&+aoColumns之前的所有其他参数都是正确的，否则entered.Any错误的参数将破坏此功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1613901|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Be sure that all others parameters before bAutoWidth &amp; aoColumns are correctly entered.Any wrong parameter before will break this functionality.

blocks|key|1613992|text|您必须至少保留一个没有固定字段的字段，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1613993|$('.data-table').dataTable+({

+"bAutoWidth":+false,
+"aoColumns"+:+[
++++null,
++++null,
++++null,++++++++++++++++++++
++++null,
++++{"sWidth":+"20px"},
++++{+"sWidth":+"20px"}]
});|code-block|syntax|javascript|1613994|您可以全部更改，但只保留一个为null，这样它就可以伸展。如果你给所有的都设置宽度，它将不起作用。希望我今天能帮到什么人！|1613995|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You have to leave at least one field without fixed field, for example:

<pre><code>$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
 null,
 null,
 null, 
 null,
 {"sWidth": "20px"},
 { "sWidth": "20px"}]
});
</code></pre>

You can change all, but leave only one as null, so it can stretch. If you put widths on ALL it will not work. Hope I helped somebody today!

blocks|key|1614016|text|这可以很好地工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1614017|#report_container+{
+++float:+right;
+++position:+relative;
+++width:+100%25;
}|code-block|syntax|javascript|1614018|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works fine.

<pre><code>#report_container {
 float: right;
 position: relative;
 width: 100%;
}
</code></pre>

blocks|key|1614074|text|我对数据表的列宽有很多问题。对我来说最神奇的解决办法就是把这句话|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1614075|table-layout:+fixed;|code-block|syntax|javascript|1614076|此css与表的整体css相匹配。例如，如果您声明了如下数据表：|1614077|LoadTable+=+$('#LoadTable').dataTable.....|1614078|然后，神奇的css代码行将放入类Loadtable中|1614079|#Loadtable+{
margin:+0+auto;
clear:+both;
width:+100%25;
table-layout:+fixed;|1614080|}|1614081|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I have had numerous issues with the column widths of datatables. The magic fix for me was including the line 

<pre><code>table-layout: fixed;
</code></pre>

this css goes with the overall css of the table. For example, if you have declared the datatables like the following:

<pre><code>LoadTable = $('#LoadTable').dataTable.....
</code></pre>

then the magic css line would go in the class Loadtable 

<pre><code>#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;
</code></pre>

}

blocks|key|1614146|text|我遇到了类似的问题，我发现列中的文本不会换行，使用这个css代码解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1614147|th,td{
max-width:120px+!important;
word-wrap:+break-word
}|code-block|syntax|javascript|1614148|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

i had the similar problem and found that text in columns don't break and using this css code solved the problem

<pre><code>th,td{
max-width:120px !important;
word-wrap: break-word
}
</code></pre>

blocks|key|1399491|text|TokenMacGuys解决方案效果最好，因为这是jQdataTable中错误的结果。如果使用$('#sometabe').dataTable().fnDestroy()，表格宽度将被设置为100px而不是100%25。这里有一个快速解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1399492|$('#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%25");
++++++++}

++++});|code-block|syntax|javascript|1399493|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

TokenMacGuys solution works best becasue this is the result of a bug in jQdataTable. What happens is if you use $('#sometabe').dataTable().fnDestroy() the table width gets set to 100px instead of 100%. Here is a quick fix:

<pre><code>$('#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%");
 }

 });
</code></pre>

blocks|key|1614265|text|"fnInitComplete":+function()+{
++++$("#datatables4_wrapper").css("width","60%25");
+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1614266|这可以很好地调整整个表格的宽度。谢谢@彼得·德林南！|unstyled|1614267|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>"fnInitComplete": function() {
 $("#datatables4_wrapper").css("width","60%");
 }
</code></pre>

This worked fine to adjust the whole table width. Thanks @Peter Drinnan!

blocks|key|1399601|text|与在Datatable+10.1中一样，这很简单。只需在HTML中将width属性添加到表中即可。即width="100%25"，这将覆盖所有由DT设置的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1399602|查看此http://www.datatables.net/examples/basic_init/flexible_width.html|offset|length|1399603|entityMap|0|LINK|mutability|MUTABLE|url|http://www.datatables.net/examples/basic_init/flexible_width.html^0|0|3|1T|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

As on Datatable 10.1, this is straight forward. Just put width attribute to your table in HTML. 
i.e. width="100%", this will override all CSS styles set by DT. 

See this <a href="http://www.datatables.net/examples/basic_init/flexible_width.html" rel="noreferrer">http://www.datatables.net/examples/basic_init/flexible_width.html</a>

blocks|key|1399660|text|在ajax调用的“成功”中创建fixedheader，就不会有任何标题和行对齐的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1399661|success:+function+(result)+{
++++++++++++++/*+Your+code+goes+here+*/

++++var+table+=+$(SampleTablename).DataTable();

++++++++new+$.fn.dataTable.FixedHeader(table);
}++++++++|code-block|syntax|javascript|1399662|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

create your fixedheader inside the "success" of your ajax call, you will not have any alignment problem in header and rows.

<pre><code>success: function (result) {
 /* Your code goes here */

 var table = $(SampleTablename).DataTable();

 new $.fn.dataTable.FixedHeader(table);
} 
</code></pre>

blocks|key|1399738|text|这是我做这件事的方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1399739|$('#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'+}
++++]
});|code-block|syntax|javascript|1399740|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is my way of doing it..

<pre><code>$('#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' }
 ]
});
</code></pre>

blocks|key|1614507|text|希望这能帮助那些还在苦苦挣扎的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1614508|不要把你的表放在任何容器里。在表呈现之后，使表的包装器成为容器。我知道这在表中有其他东西的地方可能是无效的，但是你总是可以把内容追加回来。|1614509|对我来说，如果你有一个侧边栏和一个容器，而这个容器实际上是那个侧边栏的偏移量，那么这个问题就会出现。|1614510|$(YourTableName%2B'_wrapper').addClass('mycontainer');|code-block|syntax|javascript|1614511|(我添加了一个面板-默认)|1614512|还有你的班级：|1614513|.mycontainer{background-color:white;padding:5px;}|1614514|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Hope this helps someone who's still struggling.

Don't keep your table inside any container. Make the table's wrapper your container after the table's rendered. I know this might be invalid at places where you have something else along with the table but then you could always append that content back.

For me,this problem arises if you have a sidebar and a container that is actually an offset to that sidebar.

<pre><code>$(YourTableName+'_wrapper').addClass('mycontainer');
</code></pre>

(I added a panel panel-default) 
And your class : 

<pre><code>.mycontainer{background-color:white;padding:5px;}
</code></pre>

blocks|key|1399938|text|将此css类添加到您的页面，它将解决此问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1399939|#<your_table_id>+{
++++width:+inherit+!important;
}|code-block|syntax|javascript|1399940|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add this css class to your page, it will fix the issue:

<pre><code>#&lt;your_table_id&gt; {
 width: inherit !important;
}
</code></pre>

blocks|key|1614658|text|找到另一个关于这个问题的有用链接，它就解决了我的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1614659|<table+width="100%25">
<tr>
++++<td+width="20%25">+Left+TD+<td>
++++<td+width="80%25">+Datatable+</td>
</tr>
</table>|code-block|syntax|javascript|1614660|Datatables+force+width+table|offset|length|1614661|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/30074910/datatables-force-width-table^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

find another useful link about this problem and it resolved my problem.

<pre><code>&lt;table width="100%"&gt;
&lt;tr&gt;
 &lt;td width="20%"&gt; Left TD &lt;td&gt;
 &lt;td width="80%"&gt; Datatable &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<a href="https://stackoverflow.com/questions/30074910/datatables-force-width-table">Datatables force width table</a>

blocks|key|1614740|text|我今天遇到了同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1614741|我使用了一种棘手的方法来解决它。|1614742|我的代码如下。|1614743|$('#tabs').tabs({
++++activate:+function+(event,+ui)+{
+++++++//redraw+the+table+when+the+tab+is+clicked
+++++++$('#tbl-Name').DataTable().draw();
++++}
});|code-block|syntax|javascript|1614744|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I Meet the same problem today. 

I used a tricky way to solve it. 

My Code as below. 

<pre><code>$('#tabs').tabs({
 activate: function (event, ui) {
 //redraw the table when the tab is clicked
 $('#tbl-Name').DataTable().draw();
 }
});
</code></pre>

blocks|key|1614787|text|也检查一下这个解决方案。这很容易地解决了我的DataTable列宽问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1614788|JQuery+DataTables+1.10.20引入了修复引导切换选项卡问题的columns.adjust()方法|offset|length|style|CODE|1614789|+$('a[data-toggle="tab"]').on(+'shown.bs.tab',+function+(e)+{
++++$.fn.dataTable.tables(+{visible:+true,+api:+true}+).columns.adjust();
}+);|code-block|syntax|javascript|1614790|请参阅文档：Scrolling+and+Bootstrap+tabs|1614791|entityMap|0|LINK|mutability|MUTABLE|url|https://datatables.net/examples/api/tabs_and_scrolling.html^0|0|14|G|0|0|6|S|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Check this solution too. this solved my DataTable column width issue easily 

JQuery DataTables 1.10.20 introduces <code>columns.adjust()</code> method which fix Bootstrap toggle tab issue

<pre><code> $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
 $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
</code></pre>

Please refer the documentation : <a href="https://datatables.net/examples/api/tabs_and_scrolling.html" rel="nofollow noreferrer">Scrolling and Bootstrap tabs</a>

I have a problem controlling the width of a table using the jQuery DataTables plugin. The table is supposed to be 100% of the container width, but ends up being an arbitrary width, rather less than the container width.

Suggestions appreciated

The table declaration looks like this

<pre><code>&lt;table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3" width="100%"&gt;
</code></pre>

And the javascript

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

Inspecting the HTML in Firebug, you see this (note the added style="width: 0px;")

<pre><code>&lt;table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;"&gt;
</code></pre>

Looking in Firebug at the styles, the table.display style has been overridden. Can't see where this is coming from

<pre><code>element.style { 
 width:0;} 

-- dataTables.css (line 84
table.display { 
 margin:0 auto; 
 width:100%; 
} 
</code></pre>

jQuery DataTables: control table width

容器

jQuery

我在使用jQuery DataTables插件控制表格宽度时遇到问题。表格应该是容器宽度的100%，但最终却是一个任意宽度，而不是容器宽度。感谢您的建议表声明如下所示<table id="querytableDatasets" class="display" cellspacing="0"cellpadding="3"...

问jQuery DataTables:控制表格宽度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery DataTables:控制表格宽度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery DataTables:控制表格宽度
EN