我使用以下代码设置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 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>
答案 0 :(得分：10)
设置列宽时，还需要设置：
autoWidth: false
...在DataTable本身
答案 1 :(得分：7)
很高兴看到你的桌子在行动，但我深深感到这是一个纯粹的内容宽度问题。具有display: table-cell的元素将尝试扩展，以便尽可能多地显示其内容而不包装。例如，具有标题为“旅行保护”的<th>的宽度（您定义为10％） - 您需要一个相当宽的表格来显示10％的“旅行保护”。
完全否定word-wrap的默认word-break和<th>设置，如下所示：
table.dataTable thead tr th {
word-wrap: break-word;
word-break: break-all;
}
某种演示（如上所述，无法向您的表格IRL证明这一点） - ＆gt; http://jsfiddle.net/9vbz7thp/
最好的方法是调整<th>的内容，使它们适合硬编码的宽度。
如果<td>的内容增长得太大（通常是一个不易破解的词）：
table.dataTable tbody tr td {
word-wrap: break-word;
word-break: break-all;
}
BTW：您无需在<th>和<td>中定义硬编码宽度。 <td>会自动从相应的<th>获取宽度。
答案 2 :(得分：4)
定义数据表属性时使用以下脚本：
＆＃34;列＆＃34;：[ {＆＃34;宽度＆＃34;：＆＃34; 25px＆＃34; }， {＆＃34;宽度＆＃34;：＆＃34; 25px＆＃34; }， {＆＃34;宽度＆＃34;：＆＃34; 450px＆＃34; }， {＆＃34;宽度＆＃34;：＆＃34; 20px＆＃34; }， {＆＃34;宽度＆＃34;：＆＃34; 20px＆＃34; }， {＆＃34;宽度＆＃34;：＆＃34; 20px＆＃34; }， {＆＃34;宽度＆＃34;：＆＃34; 20px＆＃34; }， {＆＃34;宽度＆＃34;：＆＃34; 20px＆＃34; } ]，
答案 3 :(得分：2)
对于自动调整，请明确添加
var MyDatatable = $("#memberGrid").dataTable();
MyDatatable.columns.adjust().draw();
答案 4 :(得分：2)
oTableDetails = $('#tblUserDetails').dataTable({
"autoWidth":false,
正在为我工作
答案 5 :(得分：0)
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：
<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>
答案 6 :(得分：0)
实际上，我不得不采取相反的方法，并删除了autoWidth行（与autoWidth：true相同），并记住将所需的宽度与我的数据放在同一对象中：
"columns": [{ 'data': 'account.organization_Name', width: '120px' }]
答案 7 :(得分：0)
唯一适合我的方法是在列标题上设置内联min-width：
<table width="100%">
<tr>
<thead>
<th>Ref</th>
<th style="min-width: 100px">User</th>
<th>Organisation</th>
</thead>
</tr>
...
</table>
答案 8 :(得分：0)
也许问题是由于列数所致，如果列数过多，它似乎将无法工作。尝试确定表格的大小，例如：
style =“ width：9000px”
此更改使我的列宽问题消失了
<table id="tbl-PriceDiscrepancy" class="table table-condensed table-hover" style="width: 9000px">
<thead class="btn-dark">
<tr>
<th colspan="8" style="text-align: center; background-color: indianred; padding-top: 4px">VIM</th>
<th colspan="19" style="text-align: center; background-color: darkslategrey; padding-top: 4px">MIRO</th>
<th colspan="12" style="text-align: center; background-color: cornflowerblue; padding-top: 4px">PURCHASING DOCUMENTS</th>
<th colspan="5" style="text-align: center; background-color: darkslateblue; padding-top: 4px">MIGO</th>
</tr>
<tr>
<th scope="col">Dp.Vim</th>
<th scope="col">Vim.Doc.Type</th>
<th scope="col">Completed</th>
<th scope="col">Curent.Agent</th>
<th scope="col">Multi.Agent</th>
<th scope="col">Current.Role</th>
<th scope="col">Vim.Block.Status</th>
<th scope="col">Vim.Block.Reason</th>
<th scope="col">Subsequent.Debit.Credit</th>
<th scope="col">Blocked.Due.Price</th>
<th scope="col">Payment.Block.Code</th>
<th scope="col">Miro.Doc.Num</th>
<th scope="col">Plant</th>
<th scope="col">Company.Code</th>
<th scope="col">Fiscal.Year</th>
<th scope="col">Document.Date</th>
<th scope="col">Posting.Date</th>
<th scope="col">Reference/NF</th>
<th scope="col">NF.Type</th>
<th scope="col">Vendor.Code</th>
<th scope="col">Vendor.Name</th>
<th scope="col">Miro.Total.Amount</th>
<th scope="col">Miro.Item.Amount</th>
<th scope="col">Tax.Amout</th>
<th scope="col">Currency</th>
<th scope="col">Quantity</th>
<th scope="col">Base.Unit</th>
<th scope="col">Contract.Number</th>
<th scope="col">Contract.Item.Number</th>
<th scope="col">Contract.Value</th>
<th scope="col">Contract.New.Value</th>
<th scope="col">Condition.Pricing.Unit</th>
<th scope="col">Purchasing.Document.Type</th>
<th scope="col">Purchasing.Document.Number</th>
<th scope="col">Purchasing.Document.Item</th>
<th scope="col">MatNr</th>
<th scope="col">Description</th>
<th scope="col">PO.Gross.Price</th>
<th scope="col">Purchase.Unit.Price</th>
<th scope="col">Migo.Document</th>
<th scope="col">Migo.Year</th>
<th scope="col">Migo.Amount</th>
<th scope="col">Migo.Quantity</th>
<th scope="col">Migo.Base.Unit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$('#tbl-PriceDiscrepancy').DataTable({
"aaSorting": [[0, "desc"]],
"lengthChange": true,
"filter": true,
"ordering": true,
"info": true,
"paging": true,
lengthMenu: [5, 10, 15, 20, 25, 50, 100, 200],
"iDisplayLength": _displayLenght,
columnDefs: [{
targets: 0,
width: "200px"
}, {
targets: 1,
width: "200px",
}, {
targets: 2,
width: "500px",
className: "centerCol"
}]
});
答案 9 :(得分：0)
Set the first column's width to 20% with columnDefs:
$('#example').dataTable( {
"columnDefs": [
{ "width": "20%", "targets": 0 }
]
} );
Set the first column's width to 20% with columns
$('#example').dataTable( {
"columns": [
{ "width": "20%" },
null,
null,
null,
null
]
} );`enter code here`