以自然宽度显示 DataTables 列

Question

我正在使用 DataTables 库，我正在使用 autoWidth option to have DataTables set column widths automatically, as well as the Scroller plugin 修复 headers 和来自服务器的页面数据。

当我的 table 有很多列时，这个组合看起来很漂亮，但当它只有几列时，autoWidth 设置使它们变得卡通般大。

这是一个例子：

我希望 table 的宽度只达到其内容所需的宽度，而不是更宽。有时这意味着内容对于视口来说太宽并且必须水平滚动，有时这意味着内容比视口窄，在这种情况下我不希望它占用整个水平 space.

如果我愿意 hard-code table 的最大宽度，我发现了一些可行的方法，但这样做依赖于我编写代码来估计 table 的宽度我自己的专栏。显然，这取决于各种困难的测量（字体大小、内容宽度等），我真的宁愿留给 DataTables。

有没有什么方法可以配置数据表，或者使用包装 DOM 元素和样式，这样它总是会使用仅来绘制 table需要宽度吗？

Answer 1

好吧 - 不知道是不是你要找的 - 但如果你设置

#example {
    display: block;
}

and 运行 a columns().adjust() 初始化后

var table = $('#example')
    .DataTable()
    .columns()
    .adjust()
    .draw();

然后列将缩小到绝对最小大小。
演示 -> http://jsfiddle.net/j5h9ob12/1/

更新，编辑 fiddle 中的标题以强调这一点。

Display DataTables columns at natural width