Question

我正在使用datatables

根据documentation，它说使用columns.width选项来控制列宽
当我使用columns.width并渲染表时，它会忽略此宽度并使用自己的宽度

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

我使用2列长字符串来测试我是否适用宽度
列名称包含长字符串，不含空格
列描述包含带空格的长字符串
我正在尝试将宽度200px应用于名称列

问题：

如果表格仍然强制执行自己的宽度，则columns.width的重点是什么
如何将宽度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>';
  }
}

更新小提琴 - ＆gt;的 https://jsfiddle.net/bvgu0cL3/30/

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

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

Answer 2

根据@davidkonrad的回答这是另一种方法。

<强>更新我创建了一个插件，它在列中应用已定义的css dataTables.colStyle.js

<强>用法：

// init
$('#example').DataTable({
  columnStyle: true // init plugin
});
// use in columns like this
columns: [{
  data: 'name',
  title: 'Name',
  css: {
    'width': 200,
    'min-width': 200,
    'word-wrap': 'break-word',
    'max-width': 200,
  }
}]

<强>优点：

它使用column.width选项并应用css代替classes
无需定义```classes
使用createdRow回调来执行自动化
列标题始终在一行中，这意味着如果表格宽度太小，它们的高度不会延伸
列的最小宽度始终是将列标题保留在一行中所需的宽度。如果您为某列提供了50px的宽度，那么即使它必须超过指定宽度50px

工作小提琴：https://jsfiddle.net/bababalcksheep/bvgu0cL3/42/

需要更多建议才能让它更优雅

<强> CSS：

/* keep the damn titles in one line*/
.dataTable thead td,
.dataTable thead th {
  white-space: pre;
}

<强> JS：

  var table = $('#example').DataTable({
     "createdRow": function(row, data, index) {
      var tableApi = this.api();
      var columns = tableApi.settings().init().columns;    
      var tds = $(row).find('td');
      tds.each(function(index) {
        var $td = $(this);
        var columnIndex = tableApi.column(this).index();
        //var columnIndex = tableApi.cell(this).index().column; 
        var hasWidth = columns[columnIndex].width;
        if (hasWidth) {
          $td.css({
            'width': hasWidth,
            'max-width': hasWidth,
            'min-width': hasWidth,//will enforce fixed width, skip if not required
            'word-wrap': 'break-word'
          });
        }
      });
    },
  });

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

2 个答案: