gpt4 book ai didi

javascript - 以自然宽度显示 DataTables 列

转载 作者:行者123 更新时间:2023-11-30 12:27:31 25 4
gpt4 key购买 nike

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

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

这是一个例子:

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

large columns

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

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

有没有什么方法可以配置 DataTables,或者使用包装 DOM 元素和样式,这样它总是使用必要的宽度来绘制表格?

最佳答案

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

#example {
display: block;
}

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

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

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


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

关于javascript - 以自然宽度显示 DataTables 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28868056/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com