javascript 数据表上的固定列宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25264209/
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
Fixed column width on Datatables
提问by Fernando Prieto
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. 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.
我有一个空表，直到用户执行某些操作。问题是当表格为空时，该列只有一个宽度，而当表格有内容（某些输入td）时，宽度会发生变化。我想要的是保持列大小固定，即当表为空且有内容时，列大小相同。
The following code shows de Datatable configuration. That widths shown are what i need but, for example, when the table is empty, the first column has widthof 114px
以下代码显示了 de Datatable 配置。这显示宽度是什么，我需要，但是，例如，当表是空的，第一列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"},
]
});
回答by Fernando Prieto
I SOLVED THE PROBLEMjust adding divs on thwidth fixed widths.
我解决了这个问题，只是在th宽度固定的宽度上添加 div 。
In the table definition i had this HTMLwith the Datatableconfiguration 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
});
回答by Aman
- set autoWidth: false;
- set px values to first 3 columns; important: check if the table width is a bit more than 3 columns + final one;
adjust the table width and 4th column.
$('#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 ] });
- 设置自动宽度：假；
- 将 px 值设置为前 3 列；重要：检查表格宽度是否超过 3 列 + 最后一列；
调整表格宽度和第 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 ] });
回答by obito
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;
}
