Question

我在.NET Web应用程序中使用jQuery DataTables，但如何为一个特定列设置最大宽度，所有其他列应自动调整大小（就像它们现在在我的表中一样）

修改

DataTables本身正确地做到了，问题是有一个很长的单词没有空格导致问题

Answer 1

您的问题似乎更多与CSS相关......

在CSS中使用自动换行可以解决这个问题，对于 columnX ，只需将其添加到您的CSS中。

.columnX {
  word-wrap: break-word;
}

根据您设置的列宽，它会包含没有空格的单词。

请参阅：https://developer.mozilla.org/en/css/word-wrap

Answer 2

我同意上面使用word wrap的解决方案 - 它很有用。但是，我对包含大量数据的列存在进一步的问题。我还做了以下工作以使其完全正常工作：

我的datatables列宽有很多问题。对我来说，神奇的解决方法是包括

行

table-layout: fixed;

此css与表格的整体css一致。例如，如果您已声明datatables，请执行以下操作：

LoadTable = $('#LoadTable').dataTable.....

然后，魔术css行将进入班级Loadtable。

#Loadtable {
  margin: 0 auto;
  clear: both;
  width: 100%;
  table-layout: fixed;
}

Answer 3

使用

可以很容易

'columnDefs': [
      {'max-width': '20%', 'targets': 0}
    ],

请参阅此链接以获取更多信息。（How to set max-width for particular column in jQuery DataTables）！

Answer 4

如果太长，我通过修改内容并在工具提示中显示全文来控制列宽。

{
    targets: [3],
    "render": function (data, type, row, meta) {
        return type === 'display' && data.length > 20 ?
        '<span title="' + data + '">' + data.substr(0, 18) + '...</span>' : data;
    }
},
{
    targets: [3],
    "render": function (data, type, full, meta) {
        return '<span data-toggle="tooltip" title="' + data + '">' + data + '</span>';
    }
}

使用 span 元素，您也可以直接控制长度。

{
    targets: [3],
    "render": function (data, type, full, meta) {
        return '<span style="display: inline-block; width:200px;">' + data + '</span>';
    }
}

jQuery DataTables最大列宽

4 个答案: