以自然宽度显示DataTables列 [英] Display DataTables columns at natural width

问题描述

我正在使用DataTables库，并且正在使用

---

更新，在小提琴中编辑标题以强调这一点。

I'm working with the DataTables library, and I'm using the autoWidth option to have DataTables set column widths automatically, as well as the Scroller plugin to fix headers and page data from the server.

This combination looks beautiful when my table has a large number of columns, but when it has just a few columns, the autoWidth setting makes them cartoonishly large.

Here's an example:

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

What I'd like is for the table to be only as wide as necessary for its content, and no wider. Sometimes this will mean that the content is too wide for the viewport and must be horizontally scrolled, and sometimes this will mean that the content is narrower than the viewport, in which case I don't want it to consume the whole horizontal space.

I've found a couple of approaches that work if I'm willing to hard-code a maximum width for the table, but doing so relies on me writing code to estimate the width of the columns myself. Obviously this is dependent on a wide variety of difficult measurements (font size, content width, etc) that I'd really rather leave up to DataTables.

Is there some way to configure DataTables, or use wrapping DOM elements and styles, such that it will always draw a table using only the width necessary?

解决方案

Well - dont know if that it was you are looking for - but if you set

#example {
    display: block;
}

and run a columns().adjust() right after initialisation

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

then the columns will be shrinked to the absolute minimum size.
demo -> http://jsfiddle.net/j5h9ob12/1/

---

Update, edited titles in the fiddle to emphasize the point.

这篇关于以自然宽度显示DataTables列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！