以自然宽度显示DataTables列

时间:2015-03-05 00:47:52

标签: javascript css datatables datatables-1.10

我正在使用DataTables库,并且我使用autoWidth选项让DataTables自动设置列宽,以及Scroller plugin来修复标题和页面来自服务器的数据。

当我的表有大量列时,这种组合看起来很漂亮,但当它只有几列时,autoWidth设置会使它们看起来很大。

以下是一个例子:

http://live.datatables.net/rizuvaza/2/edit

large columns

我喜欢的是桌子的内容必须尽可能宽,而且不能更宽。有时这意味着内容对于视口来说太宽而且必须水平滚动,有时这意味着内容比视口窄,在这种情况下我不希望它占用整个水平空间。

如果我愿意为表格的最大宽度进行硬编码,我发现了一些有效的方法,但这样做依赖于我自己编写代码来估算列的宽度。显然,这取决于各种困难的测量(字体大小,内容宽度等),我真的宁愿留给DataTables。

是否有某种方法可以配置DataTables,或者使用包装DOM元素和样式,这样它总是只使用 所需的宽度绘制一个表?

1 个答案:

答案 0 :(得分:3)

嗯 - 不知道你是否正在寻找 - 但如果你设置

#example {
    display: block;
}

并在初始化后立即运行columns().adjust()

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

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


更新,编辑标题以强调要点。