Can I force the table width to fill the containing DIV on redraw?

boidy

When you simply apply DataTables to an existing table on a page, if it doesn't have to do any column manipulations, then it doesn't have to figure out for itself the column widths, and lets the browser do the work, making the columns expand or shrink in width to fill the available space. If however, we start to manipulate columns (hiding them, resizing them via the DataTables API etc), or are loading the data from the server with an AJAX call, then DataTables has to do some work in figuring out how wide the columns to be displayed are going to be. On the initial table draw, it seems to take into account the width of the containing element, which will be the '-table_wrapper', and the table draws to fill in the available width of the wrapper. However, if you then resize the window, although the wrapper resizes with the window, the table contained in the wrapper, remains it's initial fixed width. This lead to some ugly displays where the tables extends beyond the wrapper, when its shrunk, or leave a lot of blank space at the right hand side of the table

I've used the columns.adjust callback to trigger a console log, and I can see that when I resize the browser window, the event is firing, and the table._wrapper does expand and shrink with the page, however the table inside the wrapper, stays a constant width. Is there a way I can get the columns.adjust function, to take into account the size of the containing element, and expand the table to fill the wrapper?

testcase: http://live.datatables.net/zuceqok/4/

boidy

Never mind, found the answer here:

https://datatables.net/examples/basic_init/flexible_width.html

Just set 'width=100%' on the <table > tag.