javascript 数据表 - 设置列宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19819597/
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
Datatables - Setting column width
提问by Elmor
I'm trying to set up width of columns as shown below:
我正在尝试设置列的宽度，如下所示：
var per_page = $("table").data("per_page");
$(".table").dataTable({
"aoColumnDefs": [
{ "sWidth": "100px", "aTargets": [ 1 ] },
{ "sWidth": "100px", "aTargets": [ 2 ] },
{ "sWidth": "100px", "aTargets": [ 3 ] },
{ "sWidth": "100px", "aTargets": [ 4 ] },
{ "sWidth": "100px", "aTargets": [ 5 ] },
{ "sWidth": "100px", "aTargets": [ 6 ] },
{ "sWidth": "100px", "aTargets": [ 7 ] }
],
"aoColumns" : [
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
],
bJQueryUI: true,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
But resulting column width is not that i'm trying to set. could you help me please?
但结果列宽不是我想要设置的。请问你能帮帮我吗？
Update 1
更新 1
I've updated my initialization code as follows, but bumped into strange behavior on IE 9: Ie takes the longest field, devides it into lines , and takes it's length as default for all rows of this column.
我已经更新了我的初始化代码如下，但在 IE 9 上遇到了奇怪的行为：即采用最长的字段，将其划分为 lines ，并将其长度作为该列所有行的默认值。
var per_page = $("table").data("per_page");
$(".table").dataTable({
sScrollX: "100%",
aoColumns : [
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
],
bJQueryUI: true,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
Update 2
I've updated code as shown below, the result in ie 9 is that the heading of the datatable is resized to new size, but the rest of the table is untouched by changes , see screenshot http://gyazo.com/282967b051366b18634d4e778205c938init code:
更新 2
我已经更新了如下所示的代码，即 9 中的结果是数据表的标题被调整为新的大小，但表格的其余部分未受更改影响，请参阅截图http://gyazo.com/ 282967b051366b18634d4e778205c938初始化代码：
var per_page = $("table").data("per_page");
var datTable = $(".table").dataTable({
sScrollX: "100%",
sScrollX: "500px",
aoColumnDefs: [
{ bSortable: false, aTargets: [ 4, 5,6 ] },
{ sWidth: "16%", aTargets: [ 1, 2,3,4,5,6 ] },
],
bJQueryUI: true,
sAutoWidth: false,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
How can I fix this behavior ?
我该如何解决这种行为？
回答by Balthazar
I see in your Update 2that you have use sAutoWidth, but I think you mistyped bAutoWidth. Try to change this.
我在您的更新 2 中看到您使用过sAutoWidth，但我认为您打错了bAutoWidth。尝试改变这一点。
You can also add a CSS rule to .tableif the problem persists.
.table如果问题仍然存在，您还可以添加 CSS 规则。
You should also be careful when the width of the content is greater than the header of the column.
当内容的宽度大于列的标题时，您也应该小心。
So something like the combination of the 1 & 2:
所以类似于 1 和 2 的组合：
$('.table').dataTable({
bAutoWidth: false,
aoColumns : [
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '10%' }
]
});
回答by Raj
you should use
"bAutoWidth" property of datatableand give width to each td/column in %
你应该使用“ bAutoWidth”的属性数据表，并给宽度在每个％TD /列
$(".table").dataTable({"bAutoWidth": false ,
aoColumns : [
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "10%"},
]
});
Hope this will help.
希望这会有所帮助。
回答by Kevin Khew
My way to do it
我的方法
$('#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' }
]
});
回答by Yush0
This is the only way i could get it working:
这是我让它工作的唯一方法：
JS:
JS：
columnDefs: [
{ "width": "100px", "targets": [0] }
]
CSS:
CSS：
#yourTable{
table-layout: fixed !important;
word-wrap:break-word;
}
The CSS part isn't nice but it does the job.
CSS 部分不是很好，但它可以完成工作。
回答by Lin
I would suggest not using pixels for sWidth, instead use percentages. Like below:
我建议不要将像素用于 sWidth，而是使用百分比。像下面这样：
"aoColumnDefs": [
{ "sWidth": "20%", "aTargets": [ 0 ] }, <- start from zero
{ "sWidth": "5%", "aTargets": [ 1 ] },
{ "sWidth": "10%", "aTargets": [ 2 ] },
{ "sWidth": "5%", "aTargets": [ 3 ] },
{ "sWidth": "40%", "aTargets": [ 4 ] },
{ "sWidth": "5%", "aTargets": [ 5 ] },
{ "sWidth": "15%", "aTargets": [ 6 ] }
],
aoColumns : [
{ "sWidth": "20%"},
{ "sWidth": "5%"},
{ "sWidth": "10%"},
{ "sWidth": "5%"},
{ "sWidth": "40%"},
{ "sWidth": "5%"},
{ "sWidth": "15%"}
]
});
Hope it helps.
希望能帮助到你。
回答by davidkonrad
You can define sScrollX : "100%"to force dataTables to keep the column widths :
您可以定义sScrollX : "100%"强制数据表保持列宽：
..
sScrollX: "100%", //<-- here
aoColumns : [
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
],
...
you can play with this fiddle -> http://jsfiddle.net/vuAEx/
你可以玩这个小提琴 - > http://jsfiddle.net/vuAEx/
回答by Raj
I can tell you another simple way to fix the width of data table in html itself.
我可以告诉你另一种简单的方法来修复 html 中数据表的宽度。
use
利用
<colgroup>
<col width="3%">
<col width="3%">
</colgroup>
here is a sample code of data table below:
下面是数据表的示例代码：
<table class="table datatable">
<colgroup>
<col width="33%">
<col width="33%">
<col width="33%">
<col width="33%">
</colgroup>
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
</table>
回答by zarpio
If you ever need to set your datatable column's width using CSS ONLY, following css will help you :-)
如果您需要仅使用 CSS 设置数据表列的宽度，以下 css 将对您有所帮助:-)
HTML
HTML
<table class="table table-striped table-bordered table-hover table-checkable" id="datatable">
<thead>
<tr role="row" class="heading">
<th width="2%">
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" />
<span></span>
</label>
</th>
<th width=""> Col 1 </th>
<th width=""> Col 2 </th>
<th width=""> Col 3 </th>
<th width=""> Actions </th>
</tr>
<tr role="row" class="filter">
<td> </td>
<td><input type="text" class="form-control form-filter input-sm" name="col_1"></td>
<td><input type="text" class="form-control form-filter input-sm" name="col_2"></td>
<td><input type="text" class="form-control form-filter input-sm" name="col_3"></td>
<td>
<div class="margin-bottom-5">
<button class="btn btn-sm btn-success filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
</div>
<button class="btn btn-sm btn-default filter-cancel"><i class="fa fa-times"></i> Reset</button>
</td>
</tr>
</thead>
<tbody> </tbody>
</table>
Using metronic admin theme and my table id is #datatable as above.
使用 metronic 管理主题，我的表 ID 是#datatable，如上所述。
CSS
CSS
#datatable > thead > tr.heading > th:nth-child(2),
#datatable > thead > tr.heading > th:nth-child(3) { width: 120px; min-width: 120px; }
回答by Roy Hymanson
I set the column widths in the HTML markup like so:
我在 HTML 标记中设置列宽，如下所示：
<thead>
<tr>
<th style='width: 5%;'>ProjectId</th>
<th style='width: 15%;'>Title</th>
<th style='width: 40%;'>Abstract</th>
<th style='width: 20%;'>Keywords</th>
<th style='width: 10%;'>PaperName</th>
<th style='width: 10%;'>PaperURL</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr id="@item.ID">
<td>@item.ProjectId</td>
<td>@item.Title</td>
<td>@item.Abstract</td>
<td>@item.Keywords</td>
<td>@item.PaperName</td>
<td>@item.PaperURL</td>
</tr>
}
</tbody>
</table>
回答by Ja9ad335h
for who still having issues with 1.9.4 change
对于那些仍然有 1.9.4 更改问题的人
//oSettings.aoColumns[i].nTh.style.width = _fnStringToCss(oSettings.aoColumns[i].sWidth);
oSettings.aoColumns[i].nTh.style.minWidth = _fnStringToCss(oSettings.aoColumns[i].sWidth);
