6

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

编辑

DataTables 自己正确地完成了它，问题是有一个很长的单词没有导致问题的空格

4

4 回答 4

8

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

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

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

它甚至会根据您为列设置的宽度来包装没有空格的单词。

见：https ://developer.mozilla.org/en/css/word-wrap

于 2010-07-30T09:05:52.533 回答
6

我同意上述使用的解决方案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;
}
于 2013-05-10T09:37:49.123 回答
0

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

{
    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>';
    }
}
于 2021-01-06T16:24:44.857 回答
-3

它可以很容易使用

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

有关更多信息，请参阅此链接。（如何在 jQuery DataTables 中为特定列设置最大宽度）！

于 2017-09-27T11:55:39.643 回答