jQuery DataTables column.width 选项未按预期工作

Question

我正在使用数据表

1. 根据文档，它说使用columns.width选项来控制列宽
2. 当我使用columns.width和渲染表格时，它忽略这个宽度并使用它自己的宽度

JSFIDDLE： https://jsfiddle.net/bababalcksheep/bvgu0cL3/28/

1. 我正在使用带有长字符串的 2 列来测试我是否对其应用宽度
2. 列名包含长字符串且不含空格
3. 列描述包含带空格的长字符串
4. 我正在尝试将宽度 200px 应用于名称列

问题：

1. columns.width如果表格仍然强制其自己的宽度，那么这有什么意义

2. 如何将宽度 200px 应用于名称列并查看其实际效果？

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'
    }],
  });

});

Answer 1

width 属性仅对总体相对宽度有用。在你的情况下，你也有一个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>';
  }
}

更新的小提琴 - > https://jsfiddle.net/bvgu0cL3/30/

由于您将内容包装到 a 中，因此<span>您可能会考虑向其中添加一个类，<span>而不是<th>添加<td>一个类className。

如果您想完全控制宽度，请参阅此答案 -> jQuery DataTables fixed size for ONE of the columns?