我正在使用datatables
- 根据documentation ,它说使用
columns.width
选项来控制列宽 - 当我使用
columns.width
并渲染表格时,它会忽略此宽度并使用自己的宽度
JSFIDDLE: https://jsfiddle.net/bababalcksheep/bvgu0cL3/28/
- 我正在使用带有长字符串的 2 列来测试我是否对其应用宽度
- 列名称有长字符串,不含空格
- 列描述包含带空格的长字符串
- 我正在尝试将宽度 200px 应用于名称列
问题:
如果表格仍然强制执行自己的宽度,那么这个
columns.width
的意义是什么如何将宽度 200px 应用于 name 列并查看其实际效果?
JS:
$(document).ready(function() {
var table = $('#example').DataTable({
'autoWidth': false,
'scrollX': 'true',
'scrollY': 300,
'scrollCollapse': true,
columns: [{
data: 'name',
title: 'Long Name Issues',
width:'200px',
render: function(data) {
return '<span class="">'+ data + '</span>';
}
}, {
data: 'position',
title: 'Position'
}, {
data: 'description',
title: 'Long Description Issues',
width:450,
render: function(data) {
return data;
}
}, {
data: 'salary',
title: 'salary May have Big Title'
}, {
data: 'age',
title: 'age'
}],
data: [{
name: 'DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid',
position: 'CTO',
description: 'CTO',
salary: '1000',
age: '44'
}, {
name: 'John',
position: 'tech',
description: 'description',
salary: '1000',
age: '22'
}, {
name: 'Amber',
position: 'CEO',
description: 'SOME long description with spaces SOME long description with spaces',
salary: '1000',
age: '45'
}],
});
});
最佳答案
宽度属性仅对总体相对宽度有用。在你的情况下,你还有一个 word-wrap
问题。定义一个 CSS 类并将其应用到列:
.px200 {
width: 200px;
max-width: 200px;
word-wrap: break-word;
}
columns: [{
data: 'name',
title: 'Long Name Issues',
className: 'px200', //<----
render: function(data) {
return '<span class="">'+ data + '</span>';
}
}
更新了 fiddle -> https://jsfiddle.net/bvgu0cL3/30/
由于您将内容包装到 <span>
中您可能会考虑向 <span>
添加一个类而不是 <th>
和<td>
是 className
做。
如果您想完全控制宽度,请参阅此答案 -> jQuery DataTables fixed size for ONE of the columns?
关于jQuery DataTables column.width 选项未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48320337/