twitter-bootstrap 列宽在 DataTables 引导程序中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30535609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Column width not working in DataTables bootstrap
提问by alicewilliam86
I am using the following code to set the column width of a DataTable. During partial page load the width appears to be correct and when it loads completely, the width is off.
我正在使用以下代码来设置 DataTable 的列宽。在部分页面加载期间，宽度似乎是正确的，当它完全加载时，宽度是关闭的。
<script>
$(document).ready(function () {
$("#memberGrid").dataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "../../Content/swf/copy_csv_xls.swf"
},
"destroy": true,
"info": true,
"bLengthChange": false,
"bFilter": false,
"bAutoWidth": false,
"aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }]
});
});
</script>
Table Markup
表标记
<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid">
<thead class="tablehead">
<tr>
<th style="width: 20%">Name</th>
<th style="width: 20%">Room with</th>
<th style="width: 20%">Extensions</th>
<th style="width: 10%">Travel Protection</th>
<th style="width: 20%">Flying from</th>
<th style="width: 10%">Balance</th>
</tr>
</thead>
<tbody>
<tr class="tablerows">
<td style="width: 20%"><%# Eval("Travelers") %></td>
<td style="width: 20%"><%# Eval("RoomMates")%></td>
<td style="width: 20%"><%# Eval("Extensions")%></td>
<td style="width: 10%"><%# (string) Eval("HasTpp") == "Y"? "Yes" : "No"%></td>
<td style="width: 20%"><%# Eval("Airport")%></td>
<td style="width: 10%">$<%# Eval("Balance")%></td>
</tr>
</tbody>
</table>
采纳答案by alicewilliam86
Use the following script when defining datatable properties:
定义数据表属性时使用以下脚本：
"columns": [ { "width": "25px" }, { "width": "25px" }, { "width": "450px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" } ],
"列": [ { "width": "25px" }, { "width": "25px" }, { "width": "450px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" }, { "width": "20px" } ],
回答by ozz
When setting columns widths, you also need to set:
设置列宽时，还需要设置：
autoWidth: false
...on the DataTable itself
...在数据表本身上
回答by davidkonrad
Would be nice to see your table in action, but I get a strong feeling that this is a pure matter of width of content. Elements with display: table-cellwill try to expand in order to show as much as its content as possible without wrapping. For example, the width of the <th>that has the caption "Travel Protection", which you define as 10% - you would need a rather broad table to show "Travel Protection" within 10%.
很高兴看到您的表格在运行，但我有一种强烈的感觉，这纯粹是内容宽度的问题。元素 withdisplay: table-cell将尝试扩展以在不换行的情况下显示尽可能多的内容。例如，<th>标题为“旅行保护”的宽度，您定义为 10% - 您需要一个相当宽的表格来显示 10% 以内的“旅行保护”。
So overrule the default word-wrapand word-breaksettings for <th>like this :
因此，像这样否决默认值word-wrap和word-break设置<th>：
table.dataTable thead tr th {
word-wrap: break-word;
word-break: break-all;
}
a sort of demo (as said, cannot proof this to your table IRL) -> http://jsfiddle.net/9vbz7thp/
一种演示（如上所述，无法向您的表 IRL 证明这一点）-> http://jsfiddle.net/9vbz7thp/
The best thing would be to adjust the content of the <th>'s so they fits to the hardcoded widths.
最好的办法是调整<th>'s的内容，使它们适合硬编码的宽度。
If it is the content of the <td>'s that grows too large (typically a loooong not breakable word) :
如果<td>'s的内容变得太大（通常是一个 loooong 不可破解的词）：
table.dataTable tbody tr td {
word-wrap: break-word;
word-break: break-all;
}
BTW: You do not need to define hardcoded widths in both <th>and <td>'s. <td>'s automatically get the width from the corresponding <th>.
顺便说一句：您不需要在<th>和 中定义硬编码宽度<td>。<td>的自动从相应的<th>.
回答by Praveen Kumar Rejeti
oTableDetails = $('#tblUserDetails').dataTable({
"autoWidth":false,
is working for me
正在为我工作
回答by digout
The only thing that worked for me was setting an inline min-widthon the column header:
唯一对我有用的min-width是在列标题上设置内联：
<table width="100%">
<tr>
<thead>
<th>Ref</th>
<th style="min-width: 100px">User</th>
<th>Organisation</th>
</thead>
</tr>
...
</table>
回答by Arun Prasad E S
For Auto Adjustment , Add this explicitly
对于自动调整，明确添加此项
var MyDatatable = $("#memberGrid").dataTable();
MyDatatable.columns.adjust().draw();
回答by thinhnv
var reCalculateLayoutDatatable = function(){
reCalculateLayoutDatatableYN = true;
setTimeout(function(){
var tableHeaderWidth = 0;
$("body").find("div.dataTables_scrollHeadInner table tr.row-header th").each(function() {
var cols = 1;
if(parseInt($(this).attr("colspan")) > 1) {
cols = parseInt($(this).attr("colspan"));
}
tableHeaderWidth += parseInt($(this).attr("data-col-width")) + (15 * cols);
});
$("body").find("div").css("width","auto");
$("body").find("table").css("width","auto");
$("body").find("div.dataTables_scrollBody table").css("width",tableHeaderWidth + "px");
$("body").find("div.dataTables_scrollHeadInner table").css("width",tableHeaderWidth + "px");
$("body").find("th,td").each(function(){
if($(this).attr("data-col-width") > 0){
$(this).css("width",$(this).attr("data-col-width") +"px");
}
});
},50);
}
$( window ).resize(function() {
if (reCalculateLayoutDatatableYN == true) {
reCalculateLayoutDatatable();
}
});
$( document ).ready(function() {
reCalculateLayoutDatatable();
});
HTML:
HTML：
<table id="datatableLarge" class="table">
<thead>
<tr class="row-header" >
<th data-col-width="100">管理番号</th>
<th data-col-width="350">物件名</th>
<th data-col-width="40">号室</th>
<th data-col-width="100" >
管理区分
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-col-width="100">1234</td>
<td data-col-width="350">物件1</td>
<td data-col-width="40">号室1</td>
<td data-col-width="100" >
管理区分
</td>
</tbody>
回答by Sean Saúl Astrakhan
I actually had to take the opposite approach and delete the autoWidth line (same as autoWidth:true) and remember to put the desired width in the same object as my data:
我实际上不得不采取相反的方法并删除 autoWidth 行（与 autoWidth:true 相同）并记住将所需的宽度与我的数据放在同一个对象中：
"columns": [{ 'data': 'account.organization_Name', width: '120px' }]
As seen here: http://live.datatables.net/jatazeho/1/edit
