[英]Fixed column width on Datatables
I have a table that is empty until the user do some actions. 在用户执行某些操作之前,我有一个空表。 The problem is that when the table is empty, the column have one width and when the table has content (some inputs on
td
) the width changes. 问题在于,当表为空时,该列具有一个宽度,而当表具有内容(
td
上的某些输入)时,宽度会变化。 What i want is to keep the column size fixed, that is, the same column size when the table is empty and when it has content. 我想要的是保持列大小固定,即表为空且包含内容时的列大小相同。
The following code shows de Datatable configuration. 以下代码显示了Datatable的配置。 That widths shown are what i need but, for example, when the table is empty, the first column has
width
of 114px
所示的宽度是我需要的宽度,例如,当表为空时,第一列的
width
为114px
tabla = $('#tabla').DataTable({
language: {
url: '/recursos/estilos/DataTables-1.10.1/js/locale/es_AR.json'
},
"bSort": false,
"bAutoWidth": false,
aoColumns : [
{ "sWidth": "104px"},
{ "sWidth": "263px"},
{ "sWidth": "105px"},
{ "sWidth": "105px"},
{ "sWidth": "105px"},
{ "sWidth": "105px"},
{ "sWidth": "33px"},
]
});
I SOLVED THE PROBLEM just adding divs on th
width fixed widths. 我解决了这个问题只是关于添加的div
th
宽度固定的宽度。
In the table definition i had this HTML
with the Datatable
configuration shown on the question: 在表定义中,我将这个
HTML
和Datatable
配置显示在问题上:
<thead>
<tr>
<th>Code</th>
</tr>
<tr>
<th>Description</th>
</tr>
</thead>
What i did now, is to add divs on the HTML: 我现在所做的是在HTML上添加div:
<thead>
<tr>
<th><div style="width: 100px;">Codigo</div></th>
</tr>
<tr>
<th><div style="width: 300px;">Description</div></th>
</tr>
</thead>
And the current Datatable configuration is: 当前的数据表配置为:
tabla = $('#tabla').DataTable({
language: {
url: '/recursos/estilos/DataTables-1.10.1/js/locale/es_AR.json'
},
"bSort": false
});
adjust the table width and 4th column. 调整表格宽度和第4列。
$('#example').DataTable({ //four column table autoWidth: false, //step 1 columnDefs: [ { width: '300px', targets: 0 }, //step 2, column 1 out of 4 { width: '300px', targets: 1 }, //step 2, column 2 out of 4 { width: '300px', targets: 2 } //step 2, column 3 out of 4 ] });
Specifying a fixed column width in jQuery Datatables
在jQuery Datatables中指定固定的列宽
you can define a CSS class to your column like this : 您可以像这样为您的列定义CSS类:
aoColumns : [ { "sClass": "my_class" }]
aoColumns:[{“ sClass”:“ my_class”}]
And in your CSS : 在您的CSS中:
.my_class
{
overflow:hidden;
width:200px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.